fiber 图解示例

那么什么是fiber呢？往小了说它就是一种数据结构，包含了任务开始时间，节点关系信息（return,child这些），我们把视角往上抬一点，我们也可以说fiber是一种模拟调用栈的特殊链表，目的是为了解决传统调用栈无法暂停的问题。

而站在宏观角度fiber又是一种调度让出机制，它让react达到了增量渲染的目的，在保证帧数流畅的同时，fiber总是在浏览器有剩余时间的情况下去完成目前目前最高优先级的任务。

所以如果让我来提炼fiber的关键词，我大概给出如下几点：

• fiber是一种数据结构。
• fiber使用父子关系以及next的妙用，以链表形式模拟了传统调用栈。
• fiber是一种调度让出机制，只在有剩余时间的情况下运行。
• fiber实现了增量渲染，在浏览器允许的情况下一点点拼凑出最终渲染效果。
• fiber实现了并发，为任务赋予不同优先级，保证了一有时间总是做最高优先级的事，而不是先来先占位死板的去执行。
• fiber有协调与提交两个阶段，协调包含了fiber创建与diff更新，此过程可暂停。而提交必须同步执行，保证渲染不卡顿。
• 而通过fiber的协调阶段，我们了解了diff的对比过程，如果将fiber的结构理解成一棵树，那么这个过程本质上还是深度遍历，其顺序为父—父的第一个孩子—孩子的每一个兄弟。

通过源码，我们了解到react的diff是同层比较，最先比较key，如果key不相同，那么不用比较剩余节点直接删除，这也强调了key的重要性，其次会比较元素的type以及props。而且这个比较过程其实是拿旧的fiber与新的虚拟dom在比，而不是fiber与fiber或者虚拟dom与虚拟dom比较，其实也不难理解，如果key与type都相同，那说明这个fiber只用做简单的替换，而不是完整重新创建，站在性能角度这确实更有优势。

fiber 树关系图

image.png