当前位置：首页 > React

react 渲染实现

2026-01-26 10:52:15React

React 渲染实现原理

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

协调阶段（Reconciliation）

React 使用虚拟 DOM（Virtual DOM）来表示 UI 的状态。当组件的状态或属性发生变化时，React 会创建一个新的虚拟 DOM 树，并与旧的虚拟 DOM 树进行比较（Diffing 算法）。这个过程称为协调。

虚拟 DOM 是一个轻量级的 JavaScript 对象，包含组件的类型、属性和子元素等信息。React 通过比较新旧虚拟 DOM 树的差异，找出需要更新的部分。

提交阶段（Commit）

在提交阶段，React 将协调阶段计算出的差异应用到实际的 DOM 上。这个过程包括创建、更新或删除 DOM 节点。React 会批量处理 DOM 更新以提高性能。

渲染流程示例

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

import React from 'react';

function App() {
  return <div>Hello, React!</div>;
}

export default App;

当 App 组件被渲染时，React 会执行以下步骤：

创建虚拟 DOM 树，表示 App 组件的结构。
将虚拟 DOM 树转换为实际的 DOM 节点。
将 DOM 节点插入到页面中。

性能优化

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

React.memo: 用于避免不必要的函数组件重新渲染。
useMemo: 用于缓存计算结果，避免重复计算。
useCallback: 用于缓存函数引用，避免不必要的函数重新创建。

import React, { useMemo, useCallback } from 'react';

function ExpensiveComponent({ list, onClick }) {
  const sortedList = useMemo(() => list.sort(), [list]);
  const handleClick = useCallback(() => onClick(), [onClick]);

  return (
    <div onClick={handleClick}>
      {sortedList.map(item => <div key={item}>{item}</div>)}
    </div>
  );
}

export default React.memo(ExpensiveComponent);

并发模式（Concurrent Mode）

React 18 引入了并发模式，允许 React 中断渲染过程以处理更高优先级的任务。这提高了应用的响应速度，尤其是在处理复杂 UI 时。

import React from 'react';
import { createRoot } from 'react-dom/client';

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