fiber架构

约 1263 字大约 4 分钟

2025-05-22

原文链接：https://juejin.cn/post/7395079370795663414

传统 React 架构的局限性

React 最初的架构在处理 UI 更新时采用了同步的、阻塞的方式。即一次更新会从根节点开始递归遍历整棵组件树，直至完成所有组件的渲染。这种方式在处理简单的 UI 时表现良好，但随着应用的复杂性增加，特别是在处理大量节点更新或频繁用户交互时，传统架构暴露出了以下几个主要局限性：

单次渲染时间过长：当组件树较大时，一次完整的渲染更新可能会占用大量的时间，这会导致主线程被阻塞，无法响应用户的输入，进而影响用户体验。
缺乏优先级管理：传统架构无法根据任务的重要性分配优先级，所有更新一视同仁，这意味着关键任务（如用户输入处理）可能会被不重要的任务（如低优先级的动画或日志更新）阻塞。
中断和恢复困难：在传统架构中，一旦开始渲染更新，就无法中途中断并恢复，这使得在处理高优先级任务时非常不灵活。

Fiber的优势

可以将更新过程拆分为多个小任务来解决性能瓶颈和用户体验问题。

性能瓶颈

增量渲染：Fiber 将渲染过程分成多个可以中断的小任务，这样即使组件树非常庞大，每个任务的执行时间也会较短，避免了长时间的阻塞。
任务分片：通过任务分片（Time Slicing）技术，Fiber 可以在空闲时间片段内执行渲染任务，从而最大限度地利用浏览器的空闲时间，提升整体性能。

Fiber 是一种数据结构

Fiber 节点

是js的一个对象
用于描述组件树的结构和状态

{
    stateNode: new ClickCounter,
    type: clickCounter,
    alternate: null,
    key: null,
    updateQueue: null,
    memoizedstate: {count:0},
    pendingProps: {}
    memoizedProps: {},
    tag: 1,
    effectTag: 0,
    nextEffect: null
}

Fiber 树

Fiber 树的创建过程主要包括以下几个步骤：

根据 JSX 构建虚拟 DOM 树：React 会根据 JSX 语法构建虚拟 DOM 树，表示整个组件树的结构。
生成 Fiber 节点：对于每个虚拟 DOM 节点，React 会生成对应的 Fiber 节点，并建立起 Fiber 树的层级结构。
执行初次渲染：React 会从根节点开始递归遍历 Fiber 树，执行组件的生命周期方法和渲染函数，将组件树渲染到 DOM 中。

在Fiber中有很对指针指向前一个Fiber或后一个等，可以随时中断遍历树，可以执行优先级高的任务后可立即恢复。

当状态和数据发生变化时，会生成新的虚拟 DOM 树和老的虚拟 DOM 树进行比价跟新，同时也会改变Fiberd节点相应信息

协调（Reconciliation）

协调是指确定组件树的更新方式

传统协调
传统协调，主要才有递归深度优先，一旦开始就不可以结束，到dom树大时性能消耗大
现在协调（增量渲染）
增量渲染的核心思想是将协调过程分解为多个小任务，并使用任务调度器（Scheduler）来动态地调度这些任务。这种方式使得在更新过程中可以中断，并在下一个空闲时间片段内恢复，从而提高了渲染的灵活性和效率。

双缓存

在 React 中，双缓存是一种用于解决 UI 渲染过程中闪烁和视觉不连续的技术。传统的渲染过程中，更新操作会直接修改 DOM，导致在更新过程中用户可能会看到中间状态的 UI，造成视觉上的不连续和不稳定。双缓存技术通过在内存中维护两份 UI 状态，一份用于渲染当前帧，另一份用于计算下一帧的状态，从而避免了直接在 DOM 上进行更新操作。

双缓存Fiber树
会有2可树，一棵树是前屏幕上显示内容对应的Fiber树称为current Fiber树
另一棵树是正在内存中构建的Fiber树称为workInProgress Fiber树
通过切换来解决 UI 渲染过程中闪烁和视觉不连续的技术

时间切片

时间切片是一种避免主线程长时间阻塞的技术，其核心思想是将长任务拆分成多个小任务，以便在宏任务队列中执行

Concurrent Mode

Concurrent Mode 是 React Fiber 的一项重要特性，它是一种新的渲染模式
能够在多个优先级任务之间动态地调度执行，使得高优先级任务能够优先得到处理，从而提高了页面的响应速度和用户交互的流畅度。