当前位置：首页 > React

react是如何渲染的

2026-03-10 19:57:17React

React 的渲染机制

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

协调阶段（Reconciliation）

React 通过虚拟 DOM（Virtual DOM）的对比算法（Diffing Algorithm）来确定哪些部分需要更新：

虚拟 DOM 的生成
- 当组件的状态或属性变化时，React 会重新调用组件的 render 方法，生成新的虚拟 DOM 树。
- 虚拟 DOM 是一个轻量级的 JavaScript 对象，描述 DOM 的结构。
Diffing 算法
- React 会对比新旧虚拟 DOM 树，找出差异（Diff）。
- Diffing 算法遵循以下规则：
  - 逐层比较：从根节点开始逐层对比，不会跨层级比较。
  - Key 属性优化：列表渲染时，key 帮助 React 识别元素的唯一性，减少不必要的重新渲染。

提交阶段（Commit）

在协调阶段完成后，React 会将计算出的差异应用到真实 DOM：

DOM 更新
- React 会根据 Diffing 的结果，调用浏览器 API（如 appendChild、removeChild）更新 DOM。
- 更新是批量的，减少浏览器重排和重绘的次数。
生命周期与副作用
- 在提交阶段，React 会触发相关生命周期方法（如 componentDidMount、componentDidUpdate）或副作用钩子（如 useEffect）。

渲染优化机制

React 提供了多种优化渲染性能的方式：

React.memo
- 用于函数组件，避免不必要的重新渲染，仅当属性变化时才更新。
useMemo 和 useCallback
- useMemo 缓存计算结果，避免重复计算。
- useCallback 缓存函数，避免子组件因函数引用变化而重新渲染。
并发模式（Concurrent Mode）
- React 18 引入的并发特性，允许中断渲染过程，优先处理高优先级任务。

示例代码

以下是一个简单的 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;