React核心原理

React 的核心原理和 Fiber 架构 是理解 React 内部工作机制的关键。下面分几个部分详细讲解：

---

一、React 核心原理概述

React 的核心思想是通过 声明式编程 和 组件化 构建用户界面，其核心原理包括：

1. 虚拟 DOM（Virtual DOM）

   • React 通过虚拟 DOM 抽象真实 DOM，避免直接操作真实 DOM 带来的性能损耗。
   • 虚拟 DOM 是一个轻量级的 JavaScript 对象树，每次组件状态变化时，React 会生成新的虚拟 DOM 树，并与旧的进行对比（Diff 算法），找出最小差异，最终批量更新真实 DOM。

2. 协调（Reconciliation）

   • Diff 算法：React 通过对比新旧虚拟 DOM 树，找出需要更新的部分。算法基于两个假设优化性能：
     • 不同类型的元素生成不同的树（如
       → ，直接销毁重建）。
     • 通过 key 标识同一层级元素的移动（如列表渲染）。
   • 批量更新：React 将多次状态更新合并为一次渲染，减少真实 DOM 操作次数。

3. 组件化与单向数据流

   • 组件通过 props 接收父组件数据，通过 state 管理自身状态。
   • 数据流是单向的，确保可预测性。

---

二、Fiber 架构的背景

在 React 16 之前，React 的更新过程是 同步 的（称为 Stack Reconciler），存在以下问题：

1. 阻塞主线程：大型应用的一次更新可能长时间占用主线程，导致动画卡顿、输入延迟。
2. 不可中断：一旦开始更新流程，必须执行完成，无法优先处理高优先级任务（如用户交互）。

为了解决这些问题，React 团队在 16 版本引入 Fiber 架构，核心目标是：

• 增量渲染（Incremental Rendering）：将更新任务拆分成多个小任务，可中断和恢复。
• 优先级调度：根据任务优先级（如用户输入、动画）动态调整执行顺序。
• 支持并发模式：为未来功能（如 Suspense、过渡更新）提供基础。

---

三、Fiber 架构的核心设计

1. Fiber 节点

每个 React 元素（组件、DOM 节点）对应一个 Fiber 节点，它是一个包含以下信息的 JavaScript 对象：

{
  type: 'div',          // 组件类型（函数、类组件或 HTML 标签）
  key: '...',           // 唯一标识
  stateNode: divElement,// 对应的真实 DOM 节点
  child: FiberNode,     // 第一个子节点
  sibling: FiberNode,   // 下一个兄弟节点
  return: FiberNode,    // 父节点
  pendingProps: {...},  // 待处理的 props
  memoizedProps: {...}, // 已处理的 props
  memoizedState: {...}, // 当前状态（如 hooks 的 state）
  effectTag: 'UPDATE',  // 标记需要执行的副作用（如插入、更新、删除）
  alternate: FiberNode, // 指向旧的 Fiber 节点（用于 Diff 对比）
  // ... 其他字段（如优先级、任务调度信息）
}

Fiber 节点构成了一棵 链表树（不再是递归的树结构），便于中断和恢复遍历。

---

2. 双阶段工作流程

Fiber 架构将更新分为两个阶段：

1. 协调阶段（Reconciliation Phase / Render Phase）

   • 目标：生成 Fiber 树，找出需要更新的副作用（如 DOM 变更）。
   • 过程：深度优先遍历 Fiber 树，对比新旧节点，标记变更（effectTag），构建 副作用链表（Effect List）。
   • 可中断：React 根据任务优先级和时间片（Time Slicing）决定是否暂停或继续。

2. 提交阶段（Commit Phase）

   • 目标：将协调阶段收集的副作用一次性提交到真实 DOM。
   • 过程：遍历副作用链表，执行 DOM 更新、生命周期方法（如 componentDidMount）、Hooks 的副作用（如 useEffect）。
   • 不可中断：必须一次性完成，确保 UI 一致性。

---

3. 调度器（Scheduler）

React 使用调度器管理任务优先级和执行顺序：

• 优先级机制：任务分为不同优先级（如 Immediate、UserBlocking、Normal、Low）。
• 时间切片（Time Slicing）：将长任务拆分为多个 5ms 左右的小任务，通过 requestIdleCallback（或 polyfill）在浏览器空闲时执行。
• 任务中断与恢复：如果高优先级任务到来（如用户点击），当前低优先级任务会被中断，优先执行高优先级任务。

---

4. 双缓冲技术（Double Buffering）

React 维护两棵 Fiber 树：

• Current 树：当前屏幕上显示的 UI 对应的 Fiber 树。
• WorkInProgress 树：正在构建的新 Fiber 树。

更新时，React 基于 Current 树克隆出 WorkInProgress 树，在协调阶段完成后，两棵树交换（current = workInProgress）。这种机制确保更新原子性，避免中间状态闪烁。

---

四、Fiber 架构的优势

1. 支持并发模式：允许 React 同时处理多个更新任务，优先响应用户交互。
2. 更平滑的渲染：通过时间切片避免主线程阻塞。
3. 增量更新：大型应用更新不再需要一次性完成。
4. 更灵活的生命周期：废弃了不安全的生命周期（如 componentWillReceiveProps），引入 getDerivedStateFromProps 等新 API。

---

五、示例：Fiber 工作流程

假设一个组件更新触发了 Fiber 的协调过程：

1. React 从根节点开始遍历，构建 WorkInProgress 树。
2. 遍历过程中，对比新旧 Fiber 节点，标记变更（如 UPDATE、PLACEMENT）。
3. 如果时间片用完，React 暂停遍历，将控制权交还浏览器。
4. 浏览器处理高优先级任务（如用户输入）后，React 恢复遍历。
5. 协调完成后，进入提交阶段，一次性更新 DOM。

---

六、总结

• Fiber 架构 是 React 实现高性能和并发模式的核心。
• 通过 链表结构、双阶段更新、优先级调度 和 双缓冲技术，React 能够高效管理复杂应用的渲染流程。
• 开发者虽然无需直接操作 Fiber，但理解其原理有助于优化性能（如合理使用 key、避免不必要的渲染）。