共计 1134 个字符，预计需要花费 3 分钟才能阅读完成。
前言
react 在 16 版本实现了 react fiber。
那么 react fiber 到底是什么呢？
官网的一句话解释是“React Fiber 是对外围算法的一次从新实现 ”
对于使用者而言，不须要做什么额定操作来应用它。
react fiber 呈现的起因是什么？
在简单的 DOM 构造中，如果有大量的组件要被渲染，那么会造成页面响应特地慢的状况，比方页面响应提早几百毫秒，用户就可能感觉到卡顿
另一方面是做一些简单的动画的时候，动画的卡顿是不言而喻的
为了优化 react 在扭转状态时的效率，react 官网用 fiber 的形式从新实现了外围逻辑。具体来说，就是 setState 的逻辑重写（useState 同理）。
具体来说有什么扭转呢？听我缓缓道来
1.virtual Dom 数据结构扭转
在 react16 以前，虚构树的存在模式、渲染形式都是树状的。什么是树状的呢？就是从根节点开始，递归嵌套地渲染根节点的子节点。
如图，先渲染第一层的节点，再渲染第二层的第一个节点、第二层第一个节点的子节点……
重要的是，这个过程是一个 不可打断 的过程，只能等渲染完，能力去做别的事
react fiber 实现之后，是用一个单链表的模式去渲染的
如图
渲染的程序是
a1->b1->b2->c1->d1->d2->b3->c2
程序并没有扭转，然而形成结点之间互相分割的构造扭转了。
原来的构造，只是单纯的 父节点 -> 子节点 的关系
当初，变成了单纯的链式关系
从图中能够看出，a1 跟 b2 并没有间接的关系（除了 return，前面会说 return），a1 只是“告诉”b1 要进行渲染，由 b1“告诉”b2 进行渲染。
b2 及其子节点渲染完之后，再“告诉”a1：“我渲染完了”
等 b3 及其子节点也渲染完之后，a1 会变成“渲染实现”的状态，就实现了整棵树的渲染
2. 增加了 render 和 commit 阶段
fiber 的渲染分为两个阶段
第一个阶段是 render 阶段，确定哪些组件须要更新、如何更新。这个过程能够被打断
第二个阶段是 commit 阶段，确定怎么更新之后，做 DOM 的具体渲染更新。这个过程不能被打断，而且是同步渲染。
3. 增加“工夫分片”
工夫分片，艰深地说，就是将工作分成几种类型，具体为：
1. 立刻须要执行的工作
2. 用户无操作期间须要执行的工作
3. 失常工作
4. 低优先级工作
5. 浏览器闲暇时才执行的工作
依照优先级执行，如果插入了新的工作，那么也依照优先级从新排序
这个模块是用两个 es6 的新 API 实现的，别离是 window.requestAnimationFrame 和window.requestIdleCallback。具体用法能够查 MDN
结语
以上就是 fiber 的实现逻辑，集体认为其逻辑次要扭转的是渲染的数据结构局部。当然其对于咱们应用 react 来说并没有太大的影响。
