React.Fiber

1、什么是 Fiber ？
是异步渲染 ui 的解决方案

2、出现的背景：
当页面元素很多，且需要频繁刷新的场景下，浏览器页面会出现卡顿现象，原因是因为 计算任务 持续占据着主线程，从而阻塞了 UI 渲染

3、Fiber 的解题思路
思路：将 计算任务 分给成一个个小任务，分批完成，在完成一个小任务后，将控制权还给浏览器，让浏览器利用间隙进行 UI 渲染。

方法：借助 requestIdleCallback

window.requestIdleCallback()
在浏览器空闲时，让开发者在主事件循环中执行后台或低优先级的任务，而且不会对像动画和用户交互这样延迟触发的关键事件产生影响。
函数一般会按先进先调用的顺序执行，除非函数在被浏览器调用之前的等待时间，超过了它的超时时间。

4、改动位置— —Reconciler 层

React 框架内部运作可以分为 3 层：

• Virtual DOM 层：描述 UI
• Reconciler 层：负责调用组件生命周期的方法、进行 Diff 运算
• Renderer 层：根据不同的平台，渲染出相应的页面，如 ReactDOM 和 ReactNative

改动后的 Reconciler 层 称为 Fiber Reconciler，它每执行一段时间，会将控制权交还给浏览器：

改动前的 Reconciler 层 称为 Stack Reconciler，它一旦执行就不会被打断，直到执行结束：

5、Fiber Reconciler 的执行阶段

阶段一是生成 Fiber 树的渐进阶段，可以被打断。
阶段二是批量更新节点的阶段，不可被打断。

注意：阶段一有两颗树，Virtual DOM 树和 Fiber 树，Fiber 树是在 Virtual DOM 树的基础上通过额外信息生成的。
它每生成一个新节点，就会将控制权还给浏览器，如果浏览器没有更高级别的任务要执行，则继续构建；反之则会丢弃 正在生成的 Fiber 树，等空闲的时候再重新执行一遍。

后记：目前异步渲染 UI 的特性还未开启，等待 React 的后续更新。

参考：https://github.com/acdlite/react-fiber-architecture

---

欢迎关注公众号：gh_042070ae6d0a ，每周分享前端干货和生活感悟！
（完）