当前位置：首页 > React

react 如何渲染的

2026-02-26 04:50:58React

React 渲染机制

React 的渲染过程分为两个主要阶段：协调（Reconciliation）和提交（Commit）。协调阶段负责计算 DOM 的变化，提交阶段将变化应用到实际的 DOM 上。

协调阶段（Reconciliation）

在协调阶段，React 会通过虚拟 DOM（Virtual DOM）比较新旧组件的差异（Diffing 算法），生成一个更新计划。具体过程如下：

生成虚拟 DOM：当组件的状态或属性发生变化时，React 会重新调用组件的 render 方法生成新的虚拟 DOM 树。
Diffing 算法：React 会比较新旧虚拟 DOM 树的差异，找出需要更新的部分。React 采用启发式算法优化比较过程，仅对同层级的节点进行比较。
生成更新计划：根据差异计算结果，生成一个描述 DOM 如何更新的计划（如插入、更新或删除节点）。

提交阶段（Commit）

在提交阶段，React 将协调阶段生成的更新计划应用到实际的 DOM 上，完成渲染：

应用 DOM 更新：根据更新计划，React 会批量更新 DOM，确保性能最优。
调用生命周期方法：在提交阶段完成后，React 会触发相关的生命周期方法（如 componentDidMount、componentDidUpdate）。

渲染触发条件

React 的渲染通常由以下情况触发：

组件状态（state）发生变化。
父组件重新渲染导致子组件的属性（props）更新。
调用 forceUpdate 方法强制重新渲染。

性能优化

为了提高渲染性能，React 提供了以下优化手段：

shouldComponentUpdate：通过自定义逻辑控制组件是否需要重新渲染。
React.memo：用于函数组件，避免不必要的重新渲染。
useMemo 和 useCallback：缓存计算结果或函数，减少不必要的计算。

代码示例

以下是一个简单的 React 组件渲染示例：

react 如何渲染的

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

当点击按钮时，count 状态更新，触发重新渲染。React 会通过协调和提交阶段更新 DOM。

标签: react