Fiber 机制

React Fiber 是 React 16.x 版本引入的协调算法（Reconciliation Algorithm）的核心实现，它彻底重构了 React 的渲染机制，带来了异步渲染、优先级调度等关键特性，显著提升了复杂应用的用户体验。

核心概念与设计目标

1. 为什么需要 Fiber？

• 旧版协调器的问题：
  传统 React 采用递归的方式进行渲染，一旦开始就无法中断。在复杂应用中，长时间的渲染任务可能导致页面卡顿，影响用户交互体验。

• Fiber 的解决方案：
  将渲染任务拆分成多个小任务，允许中断和恢复，实现更精细的优先级控制。

2. Fiber 的核心特性

• 异步渲染：渲染任务可中断、恢复，避免长时间阻塞主线程
• 优先级调度：不同类型的更新可分配不同优先级（如动画 > 数据加载）
• 增量渲染：将渲染工作分成多个阶段，分批完成
• 暂停、复用和放弃渲染：更灵活地处理渲染过程

Fiber 的工作原理

1. Fiber 节点结构

每个 React 元素对应一个 Fiber 节点，包含以下关键属性：

• child：第一个子节点
• sibling：下一个兄弟节点
• return：父节点
• stateNode：对应的真实 DOM 节点
• alternate：指向旧的 Fiber 节点（用于比较差异）
• effectTag：标记需要执行的副作用类型（如插入、更新、删除）

2. 双缓存 Fiber 树

React 维护两棵 Fiber 树：

• current 树：当前显示在屏幕上的树
• workInProgress 树：正在构建的新树

通过 alternate 属性连接两者，完成渲染后 workInProgress 树会成为新的 current 树。

3. 渲染阶段

Fiber 将渲染过程分为两个阶段：

阶段一：协调阶段（Reconciliation Phase）

• 可中断的异步阶段
• 执行 render 方法，生成新的虚拟 DOM
• 计算需要执行的 DOM 更新（通过 Diff 算法）
• 对应生命周期方法：componentWillMount、componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate

阶段二：提交阶段（Commit Phase）

• 不可中断的同步阶段
• 将计算好的更新一次性应用到 DOM 上
• 触发副作用（如 refs、生命周期方法）
• 对应生命周期方法：componentDidMount、componentDidUpdate、componentWillUnmount

关键 API 与应用

1. 并发模式（Concurrent Mode）

Fiber 为并发渲染提供了基础，但需要通过并发模式启用：

// 旧版渲染方式（同步）
ReactDOM.render(<App />, document.getElementById('root'));

// 并发模式（异步，实验性）
ReactDOM.createRoot(document.getElementById('root')).render(<App />);

2. Suspense

用于处理异步操作（如数据加载）的组件：

function ProfilePage() {
  return (
    <div>
      <Suspense fallback={<Spinner />}>
        <ProfileDetails />
      </Suspense>
    </div>
  );
}

3. 优先级调度

通过 startTransition 标记低优先级更新：

import { startTransition } from 'react';

// 紧急更新（如点击事件）
setInputValue(input);

// 低优先级更新（如列表渲染）
startTransition(() => {
  setSearchQuery(input);
});

生命周期方法的变化

1. 被标记为不安全的方法

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

这些方法在并发模式下可能被多次调用，推荐使用以下替代方案：

• getDerivedStateFromProps（静态方法）
• useEffect（函数组件）

2. 新增生命周期方法

• getDerivedStateFromError：在渲染阶段捕获子组件错误
• getSnapshotBeforeUpdate：在 DOM 更新前获取快照

性能优化与最佳实践

1. 避免长时间阻塞渲染
   将大型计算任务分解为小任务，利用 Fiber 的异步特性。

2. 合理使用优先级
   通过 startTransition 和 useDeferredValue 区分紧急和非紧急更新。

3. 减少渲染负担
   使用 React.memo、useMemo 和 useCallback 避免不必要的渲染。

4. 测试并发行为
   使用 React 测试库提供的 waitFor 等工具测试异步渲染场景。

面试高频问题

1. 什么是 React Fiber？
   答：React Fiber 是 React 16+ 版本的协调引擎，它将渲染任务拆分成多个小单元，支持异步中断和恢复，实现了更高效的渲染调度和优先级控制。

2. Fiber 如何解决旧版 React 的性能问题？
   答：旧版 React 的协调过程是同步递归的，可能导致长时间阻塞主线程。Fiber 将渲染工作分成多个阶段，允许中断低优先级任务，优先处理高优先级任务（如用户交互），从而提高响应性。

3. Fiber 的双缓存机制是什么？
   答：React 维护两棵 Fiber 树：当前显示的 current 树和正在构建的 workInProgress 树。通过 alternate 属性连接两者，完成渲染后 workInProgress 树会成为新的 current 树。这种机制避免了频繁创建新对象，提高了性能。

4. 并发模式与传统渲染模式的区别？
   答：传统渲染是同步的，一旦开始就无法中断。并发模式允许渲染过程中断和恢复，支持多个版本的 UI 同时存在，使 React 能更好地响应用户交互。

5. 哪些生命周期方法在 Fiber 中被弃用？为什么？
   答：componentWillMount、componentWillReceiveProps 和 componentWillUpdate 被标记为不安全，因为在并发模式下它们可能被多次调用，导致副作用重复执行。推荐使用 getDerivedStateFromProps 和 useEffect 替代。

总结

React Fiber 是 React 架构的一次重大升级，它通过异步渲染和优先级调度解决了大型应用的性能瓶颈，为未来的并发模式和时间切片等特性奠定了基础。理解 Fiber 的工作原理对于优化 React 应用、处理复杂渲染逻辑以及应对面试中的高级问题都至关重要。

在实际开发中，虽然不需要直接操作 Fiber 节点，但掌握其核心思想（如渲染阶段分离、优先级控制）能帮助你写出更高效、响应性更好的 React 应用。