Web Lion

Appearance

渲染原理 ​

React 的渲染原理是一个复杂但高效的过程，它通过虚拟 DOM、协调（Reconciliation）、Fiber 架构等机制确保了用户界面的快速更新。为了更详细地解释 React 的渲染原理，我们将深入探讨新节点挂载、现有节点更新以及旧节点卸载的过程，并且涵盖整个渲染流程的关键阶段。

0. 概述 ​

  • React 元素：React 元素是一个 JavaScript 对象，它描述了要渲染的内容。
  • React 节点：React 节点是一个 JavaScript 对象，它描述了要渲染的实际 DOM 节点。
    • React 文本节点：这是一个在浏览器中实际存在的文本节点，通过document.createTextNode()创建真实文本节点。
    • React DOM 节点：这是一个在浏览器中实际存在的 DOM 节点，通过document.createElement()创建，然后设置真实 DOM 各种属性。
    • React 组件节点：这是一个在浏览器中实际存在的组件节点。
      • React 函数组件节点：这是一个在浏览器中实际存在的函数组件节点，通过函数调用创建。
      • React 类组件节点：这是一个在浏览器中实际存在的类组件节点，通过类实例调用render()方法创建。
    • React 数组节点：这是一个在浏览器中实际存在的数组节点，遍历数组，然后按数组元素具体类型创建。
    • React 空节点：这是一个在浏览器中实际存在的空节点，null、undefined、false，什么都不做。
  • 真实 DOM：浏览器中的真实 DOM，通过document.createElement() 创建。

1. 虚拟 DOM 和协调 ​

虚拟 DOM ​

  • 定义：虚拟 DOM 是一个轻量级的 JavaScript 对象树，它是真实 DOM 树的内存表示。
  • 作用：通过在内存中操作虚拟 DOM，React 可以避免频繁直接操作浏览器中的真实 DOM，因为后者是非常昂贵的操作。
  • 生成方式：每当组件的状态或属性发生变化时，React 会根据最新的状态重新构建虚拟 DOM 树。

协调（Reconciliation） ​

  • 定义：协调是 React 比较新旧虚拟 DOM 树的过程，目的是找出最小的变化集，以便尽可能少地更新真实 DOM。
  • Diffing 算法：React 使用一种称为 Diffing 的算法来比较两棵树。它从根节点开始递归地遍历树的每个节点，检查它们是否相同。如果发现差异，则记录下来。
  • 最小化 DOM 操作：一旦找到了所有差异，React 只会在真实 DOM 上执行必要的更新，而不是重绘整个页面。

2. 渲染流程的三个主要阶段 ​

提交（Reconciliation） ​

这是 React 比较新旧虚拟 DOM 树并决定如何更新真实 DOM 的过程。在这个阶段，React 不会立即修改真实 DOM，而是创建一个包含所有必要更新的效果列表。

渲染（Render） ​

在提交阶段之后，React 进入渲染阶段，在此期间它会基于更新后的虚拟 DOM 创建一个描述应如何更新真实 DOM 的效果列表。这一步不会直接修改 DOM，而是准备好了要做的更改。

提交（Commit） ​

最后，React 进入提交阶段，此时它会应用所有之前计算好的 DOM 更新。这个阶段分为三个子阶段：

  • Pre-commit：在这个阶段，React 会做一些准备工作，比如调用 getSnapshotBeforeUpdate 生命周期方法。
  • Mutation：这是实际修改 DOM 的地方，React 会插入新节点、移除旧节点或更新现有节点的属性。
  • Layout：在此阶段，React 会调用 useLayoutEffect 和 componentDidMount/componentDidUpdate 生命周期方法，允许你在 DOM 更新后立即做出反应，但在此之前。

3. 新节点挂载 ​

当一个新的组件实例首次被添加到 DOM 中时，这个过程被称为“挂载”。以下是挂载过程中发生的主要步骤：

  • 构造函数调用：对于类组件，React 会首先调用其构造函数。
  • render 方法调用：React 调用组件的 render 方法（或函数组件本身），返回一个虚拟 DOM 节点。
  • componentDidMount 或 useEffect：对于类组件，componentDidMount 生命周期方法会被调用；对于函数组件，任何没有指定依赖数组的 useEffect 钩子都会在这个时候运行。
  • 真实 DOM 更新：React 将新的虚拟 DOM 节点转换为真实 DOM 并插入到页面中。

4. 现有节点更新 ​

当组件的状态或属性发生变化时，React 会重新渲染该组件及其子组件。更新过程包括以下几个步骤：

  • 协调（Reconciliation）：React 比较新旧虚拟 DOM 树，找出需要更新的部分。
  • shouldComponentUpdate 或 React.memo：对于类组件，shouldComponentUpdate 方法可以阻止不必要的更新；对于函数组件，React.memo 可以起到类似的作用。
  • getDerivedStateFromProps：这是一个静态方法，可以在更新前根据新的属性来更新状态。
  • render 方法调用：React 再次调用组件的 render 方法，生成新的虚拟 DOM。
  • getSnapshotBeforeUpdate：这个生命周期方法允许你捕获一些信息，例如滚动位置，这些信息可能会因更新而改变。
  • 真实 DOM 更新：React 应用所有必要的 DOM 更新。
  • componentDidUpdate 或 useEffect：对于类组件，componentDidUpdate 方法会在更新完成后被调用；对于函数组件，任何依赖于更新的 useEffect 钩子都会在这个时候运行。

5. 旧节点卸载 ​

当一个组件不再需要并且应该从 DOM 中移除时，React 会执行卸载过程。以下是卸载过程中发生的主要步骤：

  • componentWillUnmount 或 useEffect 清理函数：对于类组件，componentWillUnmount 生命周期方法会被调用；对于函数组件，任何 useEffect 钩子中返回的清理函数都会在这个时候运行。这通常用于清除定时器、取消网络请求或移除事件监听器。
  • 真实 DOM 移除：React 从页面中移除对应的 DOM 节点。

性能优化 ​

为了确保高效的渲染过程，你可以采取以下几种优化措施：

  • 减少不必要的重新渲染：利用 React.memo、useMemo、useCallback 或者 PureComponent 来避免组件在没有实际变化的情况下重新渲染。
  • 懒加载组件：使用 React.lazy 和 Suspense 来按需加载组件，减少初始加载时间。
  • 合理使用 Keys：为列表项提供稳定的 key 属性，有助于 React 更有效地管理列表中的元素。
  • 避免深层嵌套：尽量保持组件层次结构扁平化，以减少 Diffing 的复杂度。
  • 使用 Web Workers 或 OffscreenCanvas：对于计算密集型任务，考虑将它们移到 Web Worker 中运行，或者使用 OffscreenCanvas 来处理复杂的图形渲染，以减轻主线程的压力。

实例：详细的渲染流程 ​

假设我们有一个计数器组件，它可以通过点击按钮增加计数值：

jsx
import React, { useState, useEffect } from "react";

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

  useEffect(() => {
    console.log(`Counter updated to ${count}`);
  }, [count]);

  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>点我</button>
    </div>
  );
}

在这个例子中：

  • 挂载：当 Counter 组件第一次渲染时，它会经历挂载过程，useState 初始化状态，useEffect 在初次渲染后执行。
  • 更新：每次点击按钮时，setCount 触发状态更新，React 会重新渲染 Counter 组件，比较新旧虚拟 DOM 树，并只更新 <p> 元素的内容。useEffect 钩子会在更新后再次执行。
  • 卸载：如果 Counter 组件从 DOM 中移除，useEffect 返回的清理函数（如果有）会被调用。

总结 ​

React 的渲染原理围绕着虚拟 DOM 和协调算法展开，这些机制使得 React 能够高效地更新用户界面，同时保持良好的性能。理解每个阶段的作用以及如何优化渲染过程，可以帮助你构建出更加高性能的应用程序。

Released under the MIT License.

Copyright © 2025-present Void Wind