React：首次渲染流程概览

原创已于 2025-07-01 18:36:11 修改 · 640 阅读

本内容遵循CC 4.0 BY-SA版权协议

标签

#react.js #javascript #前端

于 2025-07-01 18:31:08 首次发布

4 篇文章

订阅专栏

一、渲染三阶段概览

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

React应用首次渲染，分为三个阶段：

创建根对象（createRoot()）：
通过 ReactDOM.createRoot(container) 创建一个根对象（FiberRoot），该根节点是React渲染树的起点。这个根节点是一个对象，用于管理 React 的渲染流程，它提供了render、unmount等方法。

返回的 root 对象包含方法：
```
  - render()：挂载/更新组件树
  - unmount()：卸载组件树
  - hydrate()：SSR 注水
```
启用并发模式（Concurrent Mode）：

通过createRoot创建的根节点默认启用了并发模式。并发模式是React 18的核心新特性，它允许React在渲染过程中中断、暂停和恢复工作，从而让应用保持响应性，尤其是在高负载场景下。
支持并发特性：

只有使用createRoot创建的根节点才能使用如useTransition、useDeferredValue等并发特性。

第二阶段和第三阶段由root.render触发:

触发渲染（root.render(element)）：
- 将传入的 React 元素（element）转换为 Fiber 树（虚拟 DOM 的底层数据结构）。
- React 启动协调（Reconciliation）过程，对比新旧 Fiber 树，生成更新计划。
协调过程（Reconciliation）：
- Diffing 算法：递归遍历组件树，通过 Diff 算法找出需要更新的节点。
- 生成副作用（Effects）：标记需要增删改的节点（如 Placement、Update、Deletion）。

提交更新到 DOM：
- React 将协调阶段生成的副作用应用到真实 DOM：
  1. 更新 DOM：根据副作用执行 DOM 操作（如插入、删除、修改节点）。
  2. 调用生命周期方法（类组件）：
    - 对于首次渲染：调用 componentDidMount。
    - 对于更新：调用 componentDidUpdate。
  3. 处理函数组件的副作用：
    - 执行 useLayoutEffect 的清理函数（如果存在）。
    - 执行 useLayoutEffect 的回调函数（同步执行）。
    - 调度 useEffect 的回调函数（异步执行，在浏览器绘制后触发）。

性能优化：对低端设备可降级为同步渲染

createRoot(domNode, { 
  unstable_concurrentUpdatesByDefault: false 
});

关键结论：createRoot() 是 React 并发模型的入口，它重构了渲染调度机制，使 React 能实现：

1️⃣ 非阻塞渲染 

2️⃣ 智能更新批处理

3️⃣ 优先级驱动的任务调度