React-Fiber原理

__lucas

于 2024-09-19 00:43:01 发布

阅读量905

点赞数 17

分类专栏： web前端一命速通文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/JavaZwb/article/details/142347111

版权

web前端一命速通专栏收录该内容

38 篇文章 0 订阅

订阅专栏

在 React 16 之前，更新虚拟 DOM 的过程称为 Stack Reconciler，这是一个递归的过程，在层级很深的时候，单次 diff 时间过长会让 JS 线程持续被占用，导致用户交互响应迟滞，页面渲染会出现明显的卡顿。为了解决这种问题，react 团队基于 Fiber 架构重构了 React，使其能够将任务分片，划分优先级，同时能够实现类似于操作系统中对线程的抢占式调度

写在前面

由于主流的屏幕刷新率都在 60hz，因此浏览器渲染一帧的时间必须控制在 16.7ms 内才能保证不掉帧，也就是说每一次渲染都要控制在 16.7ms 内，页面才不会卡顿

浏览器每一帧都需要完成哪些工作？
浏览器一帧内的工作.png

通过上图可看到，一帧内需要完成如下六个步骤的任务：

处理用户交互
解析 js 脚本
Begin frame。resize、scroll 等事件的处理
rAF
布局
绘制

页面是一帧一帧绘制出来的，当 FPS（每秒绘制的帧数）达到 60 时，页面是流畅的，小于这个值时，用户会感觉到卡顿。也就是说浏览器 1s 绘制 60 帧，每一帧分到的时间是 1000/60 ≈ 16 ms。所以我们应该力求不让一帧的工作量超过 16ms。

由此我们知道，浏览器是一帧一帧执行的，在两个执行帧之间，主线程通常会有一小段空闲时间

浏览器一帧工作的空余.png

requestIdleCallback 可以在这个空闲期（Idle Period）调用空闲期回调（Idle Callback），执行一些任务

Fiber reconciler

Fiber 协调核心：可中断、可恢复 和 优先级

新特性如下：

给不同类型的更新任务赋予优先级，能够暂停、终止和复用渲染任务
把渲染任务拆分成块，匀到多帧
并行渲染（还在开发中，值得期待）

将以前的 stack reconciler 拆分成两个阶段：render 与 commit。render 阶段是可打断的，被拆分成一个个的小任务（fiber），在每一侦的渲染空闲期执行。然后是 commit 阶段，这个阶段是不拆分且不能打断的，将最终的 effectList 一口气更新到页面上。这两个阶段后续会详细介绍

每个更新任务都会赋予一个优先级
当更新任务抵达调度器时，高优先级的更新任务(A)会更快地被调度进入 Reconciler —— 优先级
此时有新的更新任务(B)，调度器会检查它优先级，若高于当前任务(A)，处于当前 Reconciler 层的 A 任务会被中断，调度器将 B 任务推入 Reconciler 层 —— 可中断
当 B 任务完成渲染后，新一轮调度开始，之前被中断的 A 任务将会被重新推入 Reconciler 层，继续它的渲染 —— 可恢复

Fiber Node

React Fiber 把更新过程碎片化，以 Fiber Node 为一个工作单元，执行过程如下面的图所示，每执行完一段更新过程，就把控制权交还给 React 负责任务协调的模块，看看有没有其他紧急任务要做，如果没有就继续去更新，如果有紧急任务，那就去做紧急任务

有了分片之后，更新过程的调用栈如下图所示，中间每一个波谷代表深入某个分片的执行过程，每个波峰就是一个分片执行结束交还控制权的时机，让线程处理别的事情

fiber调度.png

一个虚拟 DOM 节点对应一个 Fiber Node

type Fiber = {
  // 标识不同的组件类型
  // FunctionComponent: 0; ClassComponent: 1...
  tag: WorkTag,

  key: null | string,

  // react 元素类型
  // 可以为ClassComponent、FunctionComponent、Symbol、HostComponent...
  elementType: any,

  // The resolved function/class/ associated with this fiber.
  type: any,

  // 该fiber节点对应的ReactElement对象
  stateNode: any,

  // fiber的父级
  return: Fiber | null,

  // 单链表树状结构
  child: Fiber | null,
  sibling: Fiber | null,
  index: number,

  ref: null | (((handle: mixed) => void) & { _stringRef: ?string }) | RefObject,

  // 新 props
  pendingProps: any,
  // 旧 props
  memoizedProps: any,

  // 更新队列
  updateQueue: UpdateQueue<any> | null,

  // 旧 state
  memoizedState: any,

  // DOM diff相关
  effectTag: SideEffectTag,

  // 副作用链表
  nextEffect: Fiber | null,
  firstEffect: Fiber | null,
  lastEffect: Fiber | null,

  // 标识该组件应该在未来的某个时刻完成更新
  // expirationTime 五种类型:
  // NoWork(默认0)、Never(1)、Interactive(100 - 150)、Async(250 - 5000)、Sync(Number.MAXINTEGER)
  expirationTime: ExpirationTime,

  // 快速确定子fiber树有没有挂起的更改
  childExpirationTime: ExpirationTime,

  // fiber 的镜像节点
  alternate: Fiber | null,
};