Wepress

Appearance

说说 React render 阶段的执行过程 ​

参考答案： ​

在 React 的 Fiber 架构中，render 阶段是处理组件更新和生成虚拟 DOM 的关键阶段。

以下是 React 在 render 阶段的执行过程的详细步骤：

1. 触发渲染 ​

  • 更新请求：组件的状态或属性发生变化时，会触发一次渲染。更新可以由用户交互、网络请求响应或内部状态变化等引起。
  • 调度更新：React 会将渲染任务调度到 Fiber 树的更新队列中。调度过程使用 React 的调度器来确定任务的优先级。

2. 开始 Fiber 树的协调 ​

  • 创建 Fiber 节点：在 render 阶段，React 会为每个组件创建或更新 Fiber 节点。Fiber 节点用于表示组件及其状态，包括当前的属性、子节点和更新队列等。
  • 更新 Fiber 树：React 会将新的 Fiber 节点与旧的 Fiber 节点进行比较。这一步称为协调（Reconciliation）。React 会遍历 Fiber 树，对比新旧 Fiber 节点，计算出最小的更新集合。

3. 执行 render 方法 ​

  • 执行组件的 render 方法：对于每个 Fiber 节点，React 会执行组件的 render 方法。render 方法会返回一个虚拟 DOM 树，这个虚拟 DOM 树会被包装成新的 Fiber 节点。
  • 构建新的 Fiber 树：render 方法返回的虚拟 DOM 会被转换成新的 Fiber 节点，并替代旧的 Fiber 节点。新的 Fiber 节点将会作为子节点插入到父节点的子节点链中。

4. 更新 Fiber 节点 ​

  • 处理更新：在 Fiber 节点中，React 会处理更新队列，应用新的状态或属性。pendingProps 和 memoizedProps 分别表示待处理的属性和已记忆的属性。
  • 标记更新类型：React 会在 Fiber 节点中设置 effectTag，标记当前 Fiber 节点的更新类型，如插入、更新或删除。这些标记将用于提交阶段的实际 DOM 更新。

5. 构建 Fiber 树的副作用 ​

  • 保存副作用：在 render 阶段，React 会收集和保存副作用（side effects），例如需要在组件挂载或更新时执行的副作用操作（如数据获取、事件监听等）。这些副作用将在 commit 阶段应用到实际 DOM 上。

6. 完成 render 阶段 ​

  • 生成新的 Fiber 树：完成 render 阶段后，React 会生成一棵新的 Fiber 树，这棵树包含了所有更新后的 Fiber 节点。
  • 准备提交：新的 Fiber 树会被提交到 commit 阶段进行实际的 DOM 更新。提交过程包括应用副作用和实际的 DOM 操作。

题目要点： ​

React 的 render 阶段包括以下主要步骤：

  1. 触发和调度更新。
  2. 创建和更新 Fiber 节点。
  3. 执行组件的 render 方法，构建新的 Fiber 树。
  4. 更新 Fiber 节点，处理更新队列和副作用。
  5. 生成新的 Fiber 树，并准备提交阶段的实际 DOM 更新。

这个阶段的核心任务是生成和更新虚拟 DOM，通过比较新旧 Fiber 树来计算最小的更新集合，并准备将这些更新应用到实际 DOM 上。