React Fiber

React Fiber是 React16 中新的协调引擎。

它可以实现 “任务分割” ，让 调度算法（reconciliation） 能够 “暂停” 或 “恢复”

update: 2020-04-11

• React Fiber
  • Fiber的原因
  • 原理
  • 具体实现机制
  • Fiber的缺点

Fiber的原因

TIP

React的核心流程分为两部分：

• reconciliation（调度算法）
  • 更新state/props、调用生命周期钩子、生成virtual dom、通过diff算法、重新渲染
• commit
  • 操作dom节点更新

在 react16之前 的 “调度算法” 中，React是 同步递归渲染 的，并且无法暂停和恢复。

所以可能在 “大量的组件渲染”时，会 导致 主进程 长时间被占用，导致出现卡顿和掉帧的情况 。

原理

React Fiber可以实现 任务分割 。

原理：将任务分割成一个个独立的小任务，将它们分散到 “浏览器的空闲期” 执行。

“浏览器的空闲期” 需要由 requestIdleCallback 告知。

特点是：能充分利用 主进程的事件循环机制 。

大致数据结构

class Fiber {
    constructor (instance) {
        this.instance = instance;

        // 指向第一个 child 节点
        this.child = child;
        // 指向父节点
        this.return = parent;
        // 指向第一个兄弟节点
        this.sibling = previous;

        // Fiber节点里的Hooks链表
        this.memoizedState = Hooks // <-- 伪代码
    }
}

具体实现机制

暂停和恢复

Reactv16 将 reconciliation（调度算法） 变成了 对 链表 的遍历 。

旧：stack reconciler；新：fiber reconciler

通过指针映射，每个单元都记录着上一步、下一步，从而可以实现 暂停和恢复 。

分散执行

通过 2 个浏览器API：requestIdleCallback、requestAnimationFrame

requestIdleCallback

负责处理 低优先级的任务 。

浏览器在空闲时，会执行这个回调

requestIdleCallbackAPI：

window.requestIdleCallback(
    // 浏览器在空闲时，会执行这个回调，同时会给回调传入一个dealine对象
    // 在dealine对象中包含着浏览器目前有多少时间供我们执行
    callback: (dealine: IdleDeadline) => void,
    // 为了避免浏览器因繁忙且无剩余时间导致的饿死，可传入一个超时时间来强制让浏览器执行回调。
    option?: { timeout: number }
)

requestAnimationFrame

负责处理 高优先级的任务 。

Fiber的缺点

Fiber 比 Stack 会 花费更多的内存占用、执行性能 。