Fiber 架构

React Fiber 是 React 16 中引入的全新架构，它是 React 核心算法的一次重大重构
目标：提高 React 的渲染性能，并支持更复杂的应用场景，如并发渲染、任务优先级调度等
核心思想：将渲染过程分解为可中断、可恢复的小任务单元，从而实现更细粒度的控制和优化

背景

在 React 16 之前，React 使用的是 Stack Reconciler（栈协调器）。栈协调器采用递归的方式遍历组件树，整个过程是同步的，无法中断。这种设计存在以下问题

1. 无法中断：一旦开始渲染，就必须一次性完成整个组件树的渲染，可能导致主线程长时间被占用，造成页面卡顿。
2. 优先级控制不足：无法根据任务的优先级动态调整渲染顺序。
3. 并发支持不足：无法充分利用浏览器的空闲时间执行低优先级任务

核心概念

Fiber 节点

Fiber 是 React 中的一种数据结构，它是对组件实例的抽象。每个 React 组件（包括函数组件、类组件、DOM 节点等）都会对应一个 Fiber 节点。Fiber 节点包含了组件的状态、属性、子节点、兄弟节点等信息

• type: 组件的类型（函数组件、类组件、DOM 节点等）
• key: 组件的唯一标识，用于协调算法
• stateNode: 组件的实例（如 DOM 节点、类组件实例）
• child: 指向第一个子节点
• sibling: 指向下一个兄弟节点
• return: 指向父节点
• pendingProps: 等待应用的属性
• memoizedProps: 上一次渲染时使用的属性
• memoizedState: 上一次渲染时使用的状态
• effectTag: 标记需要执行的副作用（如插入、更新、删除）
• alternate: 指向当前 Fiber 节点的副本（用于双缓存机制）

双缓存机制

React 使用双缓存机制来管理 Fiber 树。每次渲染时，React 会构建一棵新的 Fiber 树（称为 workInProgress 树），并与当前的 Fiber 树（称为 current 树）进行比较。渲染完成后，workInProgress 树会替换 current 树，成为新的 current 树

优点

1. 可以避免直接修改当前树，减少渲染过程中的副作用。
2. 支持并发渲染，允许在渲染过程中中断和恢复

任务调度

更多内容

工作流程

渲染阶段（Render Phase）

渲染阶段是 React 构建 Fiber 树的过程。这个阶段可以被中断和恢复，React 会根据任务的优先级动态调整渲染顺序
主要任务有:

1. 协调（Reconciliation）: 通过 Diff 算法比较新旧 Fiber 树，找出需要更新的部分
2. 生成副作用列表: 标记需要执行的副作用（如插入、更新、删除）

特点:

1. 可以被中断和恢复
2. 不会直接更新 DOM，因此不会影响用户的交互

提交阶段（Commit Phase）

React 将渲染结果应用到 DOM 的过程。这个阶段是同步的，不可中断

主要任务有:

1. 执行副作用: 根据渲染阶段生成的副作用列表，更新 DOM。
2. 调用生命周期方法: 如 componentDidMount、componentDidUpdate 等。

特点:

1. 同步执行，不可中断
2. 直接操作 DOM，影响用户界面

优势

1. 支持并发渲染。 改善动画和交互的流畅性
2. 任务优先级调度
3. 增量渲染（可以将渲染任务分成多个小片段逐步执行）
4. 更好的错误处理