在 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 操作。