本文简单聊聊React的渲染流程

在前面介绍vue的系列文章中，我们通过手写vue类的方式，将vue的渲染流程基本介绍了，其框架底层的逻辑如下：

  • 初次加载时， 数据的响应式处理和模版编译，完成初始化页面的显示。所谓数据的响应式就是让我们能够知道，什么地方用到了数据，然后在数据变化时，通知那些用到该数据的地方重新编译。而模版编译则是将模版代码转换成html代码，让页面能够显示
  • 状态数据变化时， 以更新数据后的新虚拟dom和旧的虚拟dom为输入，经过diff和patch，找出差异， 更新差异，最后重新渲染

一. 那么在react中， 这个过程又是如何的呢？
实际上无论什么前端框架，其渲染的逻辑都是一致的，只是实现的方式不同，react亦是如此。

  • 初始渲染：JSX 编译 → React.createElement调用 → 执行调用生成虚拟 DOM → 基于虚拟 DOM 构建 Fiber 树 → 提交（Commit）阶段：根据 Fiber 树创建真实 DOM 挂载到页面 → 执行副作用。
  • 更新渲染：状态变化，触发重渲染 → 生成新的虚拟 DOM → 进入调和阶段：基于新虚拟 DOM 和旧 Fiber 树做 Fiber Diff（对比新旧节点，标记 “副作用”） → 构建出新的 Fiber 树（workInProgress 树） → 提交阶段：仅将 Fiber 树中标记的差异部分更新到真实 DOM → 执行副作用

虽然整体逻辑如此，但是这里还需要做点扩展。react18引入了Concurrent Mode.

在 React 18 之前，React 的渲染是「同步且不可中断」的：一旦开始渲染，会占用主线程直到完成，期间若有用户输入、点击等高频交互，会出现响应延迟（如输入文字时光标滞后）。
Concurrent Mode的核心是让 React 能够「中断、暂停、恢复或放弃」渲染过程，优先处理高优先级任务（如用户输入、点击事件），避免低优先级任务（如列表渲染、数据加载）阻塞主线程，导致页面卡顿。具体实现参考requestIdleCallback