React Fiber 入门浅学React15前的渲染方式 React15以前，React是用全量渲染的方式进行页面渲染

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 = false
    while(!shouldYield) {
        console.log('working')
        shouldYield = deadline.timeRemaining() < 1
    }
    requestIdleCallback(workLoop)
}
requestIdleCallback(workLoop)

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

React Fiber 入门浅学

React15前的渲染方式

为什么需要React Fiber

什么是Fiber

参考文章