React Fiber初探

React Fiber 是对 React 核心算法的重构，旨在解决原有调度策略在复杂更新任务中导致的界面卡顿问题，通过可中断的任务拆分和优先级调度提升交互体验。以下是详细解析：

在 React Fiber 之前，React 使用 Stack Reconciler 进行组件更新，其核心问题如下：

• 同步递归阻塞主线程：Stack Reconciler 采用深度优先遍历 Virtual DOM 节点，递归执行 Diff 和更新操作。若更新任务复杂（如 200 个组件需 200ms），主线程会被完全占用，导致用户输入无响应或动画卡顿。
• 无法中断与恢复：浏览器主线程需同时处理渲染、JS 执行等任务，长时间同步更新会挤占其他关键操作的时间，影响用户体验。
• 优化局限：此前优化（如减少组件复杂度、使用 Immutable.js）仅能降低 Diff 成本，无法解决线程阻塞问题。

React Fiber 的目标：通过重构算法，将更新任务拆分为可中断的小单元，允许浏览器在空闲时执行任务，避免主线程长时间阻塞。

React Fiber 将原有的 Virtual DOM Tree 扩展为 Fiber Tree，其核心特点包括：

• 链表结构：Fiber Tree 是单链表树，每个节点（Fiber）代表一个组件或 DOM 元素，包含任务信息、优先级等。
• 双缓冲技术：使用 Current Tree（当前视图）和 WorkInProgress Tree（构建中的新树）交替更新，通过 alternate 属性复用 Fiber 实例，减少内存分配。
• 增量更新：更新过程基于输入数据和现有 Fiber Tree 构造 WorkInProgress Tree，而非直接修改 DOM。

更新过程分为两个阶段：

• Render/Reconciliation（可中断）：

  自顶向下遍历 Fiber Tree，构造 WorkInProgress Tree。

  每个 Fiber 节点作为一个工作单元，执行以下操作：

  检查是否需要更新（如 shouldComponentUpdate）。

  更新 Props、State 等状态。

  为子节点创建 Fiber 节点（复用现有节点或新建）。

  收集副作用（Effect List），如 DOM 操作。

  通过 requestIdleCallback 调度任务，每完成一个单元后检查剩余时间，若不足则暂停，主线程空闲时恢复。

• Commit（不可中断）：

  将 WorkInProgress Tree 的 Effect List 一次性应用到 DOM，确保视图一致性。

React Fiber 为任务设置不同优先级，通过以下 API 调度：

• requestAnimationFrame：用于动画相关任务（如 animation 优先级），确保下一帧立即执行。
• requestIdleCallback：用于低优先级任务（如 offscreen 隐藏元素更新），在主线程空闲时执行。
• 优先级分类：

  Synchronous：首屏渲染，同步执行。

  Task：用户交互反馈（如输入）。

  Animation：动画。

  Idle：网络请求等非紧急任务。

由于 Reconcile 阶段可能多次执行，部分生命周期钩子被废弃或替换：

• 废弃：componentWillMount、componentWillReceiveProps、componentWillUpdate（可能多次触发）。
• 新增：

  getDerivedStateFromProps：替代 componentWillReceiveProps，仅在需要时触发。

  getSnapshotBeforeUpdate：在 Commit 阶段前捕获 DOM 信息。

  componentDidCatch：处理子组件错误。

1. 任务拆分与中断：将更新拆分为小单元，避免主线程长时间阻塞。
2. 优先级调度：确保高优先级任务（如动画、输入反馈）优先执行。
3. 复用与双缓冲：通过 Fiber 实例复用和双树交替更新，减少内存分配和视图不一致风险。
4. 异常处理：支持异常边界（Error Boundaries），提升应用稳定性。
5. 多元素返回：Render 方法可返回数组（Fragment），简化组件结构。

React Fiber 通过重构核心算法，解决了原有调度策略在复杂更新任务中的性能问题，为 React 提供了更灵活的任务管理和优先级调度能力。其设计思想（如链表遍历、双缓冲、增量更新）不仅提升了交互体验，也为后续功能（如并发模式、异步渲染）奠定了基础。深入理解 Fiber 的实现原理，有助于更好地优化 React 应用性能。

参考文章：

1. react-fiber-architecture
2. Lin Clark - React Fiber 演讲