异常教程

React 元素渲染（长文讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代前端开发中，React 作为最受欢迎的 JavaScript 库之一，其核心特性之一就是高效的 “元素渲染” 机制。无论是构建简单的组件，还是复杂的单页应用，理解 React 如何管理 UI 的更新与渲染，都是开发者进阶的必经之路。本文将从零开始，通过通俗易懂的比喻、代码示例和实际场景，深入解析 React 元素渲染的原理、流程及优化技巧，帮助读者掌握这一关键概念。

什么是 React 元素？

在 React 中，“元素”（Elements） 是构成 UI 的最小单位，它们描述了屏幕上应该显示的内容。但需要注意，React 元素并不是真实的 DOM 节点，而是轻量级的 JavaScript 对象，用于指示 React 如何更新 DOM。

元素的创建与类型

元素可以通过以下方式创建：

// 函数组件形式
function Welcome() {
  return <h1>Hello, World!</h1>;
}

// 类组件形式
class Welcome extends React.Component {
  render() {
    return <div>欢迎来到 React 世界！</div>;
  }
}

React 元素可以分为两类：

  1. JSX 元素：如 <div>、<button> 等，对应 HTML 标签。
  2. 函数/类组件：如 <Welcome />，通过自定义组件生成内容。

比喻：可以将 React 元素想象为“蓝图”——它描述了 UI 的理想状态，但实际的“建筑”（DOM）由 React 负责构建和维护。

虚拟 DOM：渲染的幕后英雄

React 的高效性离不开 虚拟 DOM（Virtual DOM） 技术。虚拟 DOM 是一个轻量级的 JavaScript 对象树，它模仿真实 DOM 的结构。当数据（State）发生变化时，React 会执行以下步骤：

  1. 创建新虚拟 DOM：根据最新的 State 生成新的虚拟节点树。
  2. Diff 算法比较差异：对比新旧虚拟 DOM 的差异，找出需要更新的部分。
  3. 批量更新真实 DOM：将差异最小化地同步到真实 DOM，减少重绘和重排的开销。

为什么需要虚拟 DOM？
直接操作真实 DOM 的性能成本极高，因为每次操作都可能触发浏览器的重排（Reflow）和重绘（Repaint）。虚拟 DOM 通过批量更新，将多次操作合并为一次，显著提升渲染效率。

渲染流程详解

React 的渲染流程可以分为三部分：初始渲染、状态更新触发渲染、渲染后的副作用处理。

1. 初始渲染

当组件首次挂载时，React 会执行以下步骤：

  • 调用组件的 render() 方法（类组件）或返回 JSX（函数组件）。
  • 生成虚拟 DOM 树。
  • 将虚拟 DOM 转换为真实 DOM，并挂载到页面上。

示例代码（函数组件）：

function Counter() {
  const [count, setCount] = React.useState(0);
  return <div>当前计数：{count}</div>;
}

2. 状态更新触发渲染

当组件的 State 或 Props 发生变化时，React 会重新渲染组件。例如：

function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

3. 副作用处理（如数据获取）

某些操作（如 API 请求、DOM 操作）需要在渲染后执行，此时需使用 生命周期钩子 或 useEffect：

// 类组件中的 componentDidMount
class DataFetcher extends React.Component {
  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }
  render() { /* ... */ }
}

// 函数组件中的 useEffect
function DataFetcher() {
  const [data, setData] = React.useState(null);
  
  React.useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(setData);
  }, []); // 空数组表示仅执行一次

  return <div>{data ? JSON.stringify(data) : '加载中...'}</div>;
}

渲染优化：提升性能的关键

尽管 React 的虚拟 DOM 已经非常高效，但在复杂应用中，仍需通过优化减少不必要的渲染。以下是一些常见策略：

1. 避免冗余渲染

  • 使用 React.memo 包裹组件：防止无状态变化的子组件重复渲染。

    const MemoizedChild = React.memo(function Child({ prop }) {
  return <div>仅在 prop 变化时渲染</div>;
});

  • 使用 PureComponent 或 shouldComponentUpdate：在类组件中，继承 React.PureComponent 可自动比较 Props 和 State 的浅层变化。

2. 利用 useCallback 和 useMemo

通过记忆化（Memoization）避免重复计算或创建函数：

function Parent() {
  const [count, setCount] = React.useState(0);
  
  // 避免每次渲染都创建新函数
  const handleClick = React.useCallback(() => {
    setCount(count + 1);
  }, [count]); // 依赖项需包含可能变化的变量

  // 避免重复计算复杂数据
  const computedValue = React.useMemo(() => {
    return heavyComputation(count);
  }, [count]);

  return <Child onClick={handleClick} data={computedValue} />;
}

3. 优先使用函数式 setState

在更新 State 时，使用函数形式确保基于最新 State 进行计算：

// 正确做法
setCount(prevCount => prevCount + 1);

// 避免直接引用外部变量
let nextCount = count + 1;
setCount(nextCount); // 可能因异步问题导致错误

实际案例：优化一个待办事项列表

假设我们有一个待办事项列表，每个事项包含标题和完成状态。初始代码可能如下：

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          <input
            type="checkbox"
            checked={todo.completed}
            onChange={() => toggleTodo(todo.id)}
          />
          <span>{todo.title}</span>
        </li>
      ))}
    </ul>
  );
}

优化步骤：

  1. 使用 React.memo 包裹子项：

    const MemoizedTodoItem = React.memo(function TodoItem({ todo, toggleTodo }) {
  return (
    <li key={todo.id}>
      {/* ... 相同内容 ... */}
    </li>
  );
});

  2. 避免在 map 中创建新函数：

    // 错误：每次渲染都会生成新函数，导致所有子项重新渲染
<input onChange={() => toggleTodo(todo.id)} />

// 正确：使用 `useCallback` 或直接传递函数
const handleToggle = React.useCallback(toggleTodo, []);
<input onChange={() => handleToggle(todo.id)} />

通过这些优化，列表的渲染性能将显著提升，尤其是在处理大量数据时。

结论

React 的 元素渲染 机制是其高效性和灵活性的核心。通过理解虚拟 DOM、Diff 算法、渲染流程及优化策略，开发者可以更从容地构建高性能的应用。无论是通过 React.memo 减少重复渲染，还是利用 useCallback 优化函数创建，这些技巧都能帮助开发者在复杂场景中保持代码的简洁与高效。

掌握这些知识后，建议读者通过实际项目练习，例如尝试优化现有代码或重构组件结构。随着经验的积累，你会逐渐发现 React 元素渲染的更多可能性，并在性能优化的道路上越走越远。

提示：想要深入学习更多细节，可以查阅 React 官方文档中的“渲染”和“优化”章节，或通过实践项目巩固所学内容。

最新发布

查看更多文章