React Rn-Rendering 工作流

Source: Dev.to

概览

在本文中，我分享对 React 重渲染工作流的个人分析。该过程包括三个核心步骤（加上浏览器绘制）。下面是每一步的简要说明。

步骤 1 – 触发

当某些内容发生变化时，React 会启动一次渲染，例如：

• 状态变化
• Props 变化
• Context 变化
• 父组件重新渲染

注意： React 并不会立即更新 DOM；它只会调度一次更新。

步骤 2 – 渲染阶段

Fiber 引擎在此阶段处理调和：

• 调用组件并创建新的 React 元素（虚拟 DOM）
• 将新输出与之前的输出进行比较（diff）
• 确定哪些部分需要更新、删除或创建

注意： 该阶段纯粹是计算过程——不会产生 DOM 变更。

步骤 3 – 提交阶段

渲染阶段结束后，提交阶段会运行且无法被中止。当 React 获得最终的变更后，它会更新真实的 DOM：

• 执行 DOM 变更
• 更新 refs
• 清理之前的副作用
• useLayoutEffect 同步 执行，发生在浏览器绘制之前

注意： 该阶段速度快但会阻塞。

步骤 4 – 浏览器绘制

当 DOM 更新完成后，浏览器会在屏幕上绘制 UI。绘制完成后：

• useEffect 异步 执行，不会阻塞

正因为如此，useEffect 不会阻塞 UI，而 useLayoutEffect 可能会。

示例

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

当按钮被点击时：

1. 触发： 调用 setCount。
2. 渲染阶段： React 创建新元素并与之前的元素进行 diff。
3. 提交阶段： 按钮文本在真实 DOM 中被更新。
4. 浏览器绘制： UI 显示新的计数。
5. useEffect（如果存在）在绘制后执行。

如果输出未改变，React 可能会跳过 DOM 更新（优化）。

重要要点

• 重渲染并不一定意味着会更新 DOM。
• 父组件的重渲染可以触发子组件的重渲染。
• React 会批量处理多个状态更新。
• key 对列表渲染至关重要。
• 在 Strict Mode 下，React 可能在开发环境中对组件进行两次渲染。
• 渲染阶段可能会运行多次，但提交阶段每次更新只运行一次。