知识库

Appearance

React 渲染过程与原理 ​

1. React 渲染流程 ​

1.1 渲染的基本概念 ​

React 的渲染过程可以分为两个主要阶段：调和阶段（Reconciliation） 和 提交阶段（Commit）。

1.2 完整渲染流程 ​

  1. 初始化渲染

    • 首次渲染时，React 会创建一个虚拟 DOM 树
    • 然后将虚拟 DOM 转换为真实 DOM 并插入到页面中

  2. 更新渲染

    • 当组件状态或属性发生变化时，React 会重新渲染
    • 首先生成新的虚拟 DOM 树
    • 然后通过 Diff 算法比较新旧虚拟 DOM 树的差异
    • 最后只更新变化的部分到真实 DOM

2. 虚拟 DOM (Virtual DOM) ​

2.1 什么是虚拟 DOM ​

虚拟 DOM 是 React 用来表示 UI 的一种轻量级 JavaScript 对象结构。它是对真实 DOM 的抽象，具有以下特点：

  • 轻量级：比真实 DOM 更简单，只包含必要的信息
  • 快速：操作虚拟 DOM 比操作真实 DOM 快得多
  • 跨平台：可以在不同环境中使用（浏览器、服务器、移动设备）

2.2 虚拟 DOM 的结构 ​

javascript
// 虚拟 DOM 节点的简化结构
const vnode = {
  type: 'div',
  props: {
    className: 'container',
    children: [
      {
        type: 'h1',
        props: {
          children: 'Hello React'
        }
      }
    ]
  }
}

3. 调和过程 (Reconciliation) ​

3.1 调和的概念 ​

调和是 React 用来比较新旧虚拟 DOM 树并找出差异的过程。这是 React 性能优化的核心。

3.2 Diff 算法 ​

React 的 Diff 算法采用了以下策略：

  1. 同级比较：只比较同一层级的节点
  2. 类型比较：如果节点类型不同，直接替换整个子树
  3. key 属性：使用 key 来标识节点，提高比较效率

3.3 Diff 算法的优化 ​

  • key 的使用：为列表项提供唯一的 key，帮助 React 识别哪些项被添加、删除或修改
  • 类型判断：快速判断节点类型是否相同，避免不必要的比较
  • 批量更新：将多个状态更新合并，减少渲染次数

4. 提交阶段 (Commit) ​

4.1 提交过程 ​

在调和阶段完成后，React 会进入提交阶段：

  1. DOM 更新：将计算出的差异应用到真实 DOM
  2. 生命周期方法：调用组件的生命周期方法
  3. 副作用处理：执行 useEffect 等副作用

4.2 批量更新 ​

React 会将多个状态更新合并为一次渲染，提高性能：

javascript
// 这两个状态更新会被合并为一次渲染
setCount(count + 1)
setMessage('Updated')

5. React 渲染原理 ​

5.1 组件渲染 ​

  • 函数组件：每次渲染时执行函数，返回虚拟 DOM
  • 类组件：调用 render 方法，返回虚拟 DOM

5.2 状态管理 ​

  • setState：异步更新状态，触发重新渲染
  • useState：React Hooks 中的状态管理，同样是异步更新

5.3 渲染优化 ​

  • shouldComponentUpdate：类组件中用于控制是否重新渲染
  • React.memo：函数组件的记忆化，避免不必要的渲染
  • useMemo：记忆化计算结果
  • useCallback：记忆化函数引用

6. 相关问题与解决方案 ​

6.1 常见渲染问题 ​

  1. 不必要的渲染

    • 症状：组件频繁重新渲染
    • 原因：父组件渲染导致子组件渲染，即使 props 未变化
    • 解决方案：使用 React.memo、useMemo、useCallback

  2. 渲染性能问题

    • 症状：大型应用渲染缓慢
    • 原因：组件树过深，状态管理不当
    • 解决方案：组件拆分、使用虚拟列表、优化状态管理

  3. 内存泄漏

    • 症状：应用内存使用持续增长
    • 原因：未清理的副作用，如定时器、事件监听器
    • 解决方案：在 useEffect 的返回函数中清理副作用

6.2 高级优化技巧 ​

  1. 代码分割：使用 React.lazy 和 Suspense 实现组件懒加载
  2. 虚拟滚动：处理长列表，只渲染可视区域内的内容
  3. 状态提升：将共享状态提升到共同的父组件
  4. Context API：避免 props drilling

7. 渲染过程中的生命周期 ​

7.1 类组件生命周期 ​

  1. 挂载阶段：constructor → getDerivedStateFromProps → render → componentDidMount
  2. 更新阶段：getDerivedStateFromProps → shouldComponentUpdate → render → getSnapshotBeforeUpdate → componentDidUpdate
  3. 卸载阶段：componentWillUnmount

7.2 函数组件生命周期（Hooks） ​

  • 挂载：useState 初始化 → 执行函数体 → useEffect 执行
  • 更新：执行函数体 → 比较依赖项 → 执行 useEffect（如果依赖项变化）
  • 卸载：执行 useEffect 的清理函数

8. React 18 的新特性 ​

8.1 并发渲染 ​

  • 时间切片：将渲染任务分解为小片段，避免阻塞主线程
  • 优先级调度：根据任务的重要性分配不同的优先级

8.2 自动批处理 ​

  • 在 React 18 中，即使在异步事件中，状态更新也会被批处理

8.3 Suspense 的改进 ​

  • 更好的代码分割支持
  • 服务端渲染的改进

9. 服务端渲染 (SSR) ​

9.1 服务端渲染的概念 ​

  • 在服务器端生成 HTML，然后发送到客户端
  • 客户端接管交互逻辑

9.2 服务端渲染的优势 ​

  • 更好的首屏加载性能
  • 更好的 SEO
  • 更好的用户体验

9.3 服务端渲染的实现 ​

  • 使用 Next.js 等框架
  • 使用 ReactDOMServer.renderToString() 或 renderToStaticMarkup()

10. 总结 ​

React 的渲染过程是一个复杂但高效的系统，通过虚拟 DOM、Diff 算法和批量更新等技术，实现了高性能的 UI 渲染。理解这些原理对于开发高性能的 React 应用至关重要。

10.1 核心要点 ​

  • 虚拟 DOM 是 React 性能的关键
  • Diff 算法优化了渲染过程
  • 批量更新减少了 DOM 操作
  • 各种优化手段（如 React.memo、useMemo 等）可以进一步提升性能
  • React 18 的并发特性为未来的性能优化开辟了新方向

10.2 最佳实践 ​

  • 合理使用 key 属性
  • 避免不必要的渲染
  • 优化状态管理
  • 合理拆分组件
  • 使用代码分割和懒加载

通过掌握这些原理和最佳实践，你可以构建出性能优异、用户体验良好的 React 应用。

基于 VitePress 的本地知识库

Copyright © 2026