React Fiber 的作用和原理

4,196 阅读4分钟

完整高频题库仓库地址:github.com/hzfe/awesom…

完整高频题库阅读地址:febook.hzfe.org/

相关问题

  • Fiber 是什么

  • 谈谈你对 Fiber 的了解

  • Fiber 对 React 的使用带来了什么影响

回答关键点

调度 深度优先遍历

Fiber 是 React 16 中采用的新协调(reconciliation)引擎,主要目标是支持虚拟 DOM 的渐进式渲染。

Fiber 将原有的 Stack Reconciler 替换为 Fiber Reconciler,提高了复杂应用的可响应性和性能。主要通过以下方式达成目标:

  • 对大型复杂任务的分片。

  • 对任务划分优先级,优先调度高优先级的任务。

  • 调度过程中,可以对任务进行挂起、恢复、终止等操作。

Fiber 对现有代码的影响:由于 Fiber 采用了全新的调度方式,任务的更新过程可能会被打断,这意味着在组件更新过程中,render 及其之前的生命周期函数可能会调用多次。因此,在下列生命周期函数中不应出现副作用。

  • shouldComponentUpdate

  • React 16 中已经声明废弃的钩子

  • componentWillMount(UNSAFE_componentWillMount)

  • componentWillReceiveProps(UNSAFE_componentWillReceiveProps)

  • componentWillUpdate(UNSAFE_componentWillUpdate)

知识点深入

1. React 是如何工作的

import React from "react";
import ReactDOM from "react-dom";

function App() {
  return <div>Hello, HZFE.</div>;
}

ReactDOM.render(<App />document.getElementById("root"));

上面代码中我们引入的两个包,分别代表了 React 的 core API 层和渲染层,在这背后还有一层被称为协调器(Reconcilers)的层次。(协调器在react-reconciler中实现)

一个 React 组件的渲染主要经历两个阶段:

  • 调度阶段(Reconciler):用新的数据生成一棵新的树,然后通过 Diff 算法,遍历旧的树,快速找出需要更新的元素,放到更新队列中去,得到新的更新队列。

  • 渲染阶段(Renderer):遍历更新队列,通过调用宿主环境的 API,实际更新渲染对应的元素。宿主环境如 DOM,Native 等。

对于调度阶段,新老架构中有不同的处理方式:

React 16 之前使用的是 Stack Reconciler(栈协调器),使用递归的方式创建虚拟 DOM,递归的过程是不能中断的。如果组件树的层级很深,递归更新组件的时间超过 16ms,用户交互就会感觉到卡顿。

图片

图片来源 react conf 17

React 16 及以后使用的是 Fiber Reconciler(纤维协调器),将递归中无法中断的更新重构为迭代中的异步可中断更新过程,这样就能够更好的控制组件的渲染。

图片

图片来源 react conf 17

2. Fiber Reconciler 如何工作

由于浏览器中 JS 的运行环境是单线程的,因此,一旦有任务耗时过长,就会阻塞其他任务的执行,导致浏览器不能及时响应用户的操作,从而使用户体验下降。为解决这个问题,React 推出了 Fiber Reconciler 架构。

在 Fiber 中,会把一个耗时很长的任务分成很多小的任务片,每一个任务片的运行时间很短。虽然总的任务执行时间依然很长,但是在每个任务小片执行完之后,都会给其他任务一个执行机会。这样,唯一的线程就不会被独占,其他任务也能够得到执行机会。

为了实现渐进渲染的目的,Fiber 架构中引入了新的数据结构:Fiber Node,Fiber Node Tree 根据 React Element Tree 生成,并用来驱动真实 DOM 的渲染。

Fiber 节点的大致结构:

{
    tag: TypeOfWork, // 标识 fiber 类型
    type: 'div'// 和 fiber 相关的组件类型
    returnFiber | null// 父节点
    child: Fiber | null// 子节点
    sibling: Fiber | null// 同级节点
    alternate: Fiber | null// diff 的变化记录在这个节点上
    ...
}

Fiber 树结构如下:

图片

图片来源 react conf 17

Fiber 的主要工作流程:

  1. ReactDOM.render() 引导 React 启动或调用 setState() 的时候开始创建或更新 Fiber 树。

  2. 从根节点开始遍历 Fiber Node Tree, 并且构建 WokeInProgress Tree(reconciliation 阶段)。

    • 本阶段可以暂停、终止、和重启,会导致 react 相关生命周期重复执行。

    • React 会生成两棵树,一棵是代表当前状态的 current tree,一棵是待更新的 workInProgress tree。

    • 遍历 current tree,重用或更新 Fiber Node 到 workInProgress tree,workInProgress tree 完成后会替换 current tree。

    • 每更新一个节点,同时生成该节点对应的 Effect List。

    • 为每个节点创建更新任务。

  3. 将创建的更新任务加入任务队列,等待调度。

    • 调度由 scheduler 模块完成,其核心职责是执行回调。

    • scheduler 模块实现了跨平台兼容的 requestIdleCallback。

    • 每处理完一个 Fiber Node 的更新,可以中断、挂起,或恢复。

  4. 根据 Effect List 更新 DOM (commit 阶段)。

    • React 会遍历 Effect List 将所有变更一次性更新到 DOM 上。

    • 这一阶段的工作会导致用户可见的变化。因此该过程不可中断,必须一直执行直到更新完成。

React 调度流程图:

图片

参考资料

  1. React Fiber Architecture
  2. React Conf 2017
  3. Inside Fiber