React Fiber 入门浅学

React15前的渲染方式

React15以前，React是用全量渲染的方式进行页面渲染，每次更新都需要整个页面重新渲染。全量当数据量大的时候，页面就会掉帧卡顿。

为什么需要React Fiber

为了解决上述React15带来的卡顿问题，我们不能让一个程序长期霸占着资源，可以将浏览器的渲染、布局、绘制、资源加载(例如HTML解析)、事件响应、脚本执行视作操作系统的’进程’，我们需要通过某些调度策略合理地分配CPU资源，从而提高浏览器的用户响应速率, 同时兼顾任务执行效率。

React16后使用Fiber作为新的协调引擎（diff算法工作），主要目的是用于增量渲染，让协调（Reconcilation）过程能进行中断，适时让出CPU执行权，让位给高优先级的任务，浏览器空闲后再恢复渲染。

什么是Fiber

React Fiber本质是一个链表，其结构大致如下：

type Fiber = {...// 指向父节点return : Fiber | null,// 指向下一个节点child: Fiber | null,// 指向同级隔壁节点sibling: Fiber | null
} 

根据这个数据结构，我们可以以迭代的方式使用深度优先遍历来处理这些节点：

/**
 * @params fiber 当前需要处理的节点
 * @params topWork 本次更新的根节点
 */
function performUnitOfWork(fiber: Fiber, topWork: Fiber) {// 对该节点进行处理beginWork(fiber);// 如果存在子节点，那么下一个待处理的就是子节点if (fiber.child) {return fiber.child;}// 没有子节点了，上溯查找兄弟节点let temp = fiber;while (temp) {completeWork(temp);// 到顶层节点了, 退出if (temp === topWork) {break}// 找到，下一个要处理的就是兄弟节点if (temp.sibling) {return temp.sibling;}// 没有, 继续上溯temp = temp.return;}
} 

React Fiber通过使用requestIdleCallback类似的实现方式来控制的组件渲染的进度条。requestIdleCallback属于宏任务，每隔16ms（一帧）会调用一次，它的回调可获取本次可执行的时间。使用方法：

const workLoop = (deadline) => {let shouldYield = falsewhile(!shouldYield) {console.log('working')shouldYield = deadline.timeRemaining() < 1}requestIdleCallback(workLoop)
}
requestIdleCallback(workLoop) 

由于兼容性问题以及更新不及预期等问题 ，React实际使用的是requestIdleCallback的polyfill方法，（Safari不支持，其余浏览器需要较新版本）

参考文章

• React Fiber Architecture
• React Fiber(时间分片) 打开方式
• 有react fiber，为什么不需要vue fiber呢？

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享