React 性能优化实战（二）：渲染机制与优化原理

发表于2025-05-28|更新于2025-06-23|技术专题React

|浏览量:

文章简介

深入解析 React 的渲染机制，包括虚拟 DOM、Diff 算法、Fiber 架构等，帮助开发者理解性能优化的底层原理。

主要内容

虚拟 DOM 与真实 DOM 的关系

React 通过虚拟 DOM（VDOM）实现高效的 UI 更新。每次状态变更时，React 会生成新的虚拟 DOM 树，与上一次的虚拟 DOM 进行对比（Diff），最终只将差异部分同步到真实 DOM，减少了直接操作 DOM 的性能开销。

示例：虚拟 DOM 更新流程

import React, { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

每次点击按钮，React 会重新渲染虚拟 DOM，仅更新变化的节点。

React 的 Diff 算法原理

React 采用分层比较、同级比较、key 优化等策略，大幅提升了 Diff 的效率。

只比较同一层级的节点
通过 key 快速定位变化的子节点
对于大列表，建议为每个元素设置唯一 key

Diff 算法源码片段（简化版理解）

// 伪代码，仅用于理解
function diff(oldTree, newTree) {
  if (oldTree.type !== newTree.type) {
    // 替换整个节点
  } else {
    // 递归比较子节点
    for (let i = 0; i < oldTree.children.length; i++) {
      diff(oldTree.children[i], newTree.children[i]);
    }
  }
}

Fiber 架构与并发渲染

React 16 引入 Fiber 架构，将渲染过程拆分为可中断的小单元（Fiber），支持并发渲染和优先级调度。

允许高优先级任务（如用户输入）打断低优先级渲染
提升大型应用的响应性

Fiber 架构核心思想

每个组件对应一个 Fiber 节点，形成 Fiber 树
渲染过程分为“调度阶段”（可中断）和“提交阶段”（不可中断）

渲染流程中的性能影响点

组件频繁重渲染（props/state 变化）
父组件更新导致子组件全部重渲染
大量列表渲染、长列表滚动
不合理的 key 导致列表 diff 效率低
复杂计算同步阻塞渲染

优化渲染的常见策略

使用 React.memo、useMemo、useCallback 避免不必要的重渲染
合理拆分组件，提升复用性和可维护性
列表渲染时设置唯一且稳定的 key
虚拟化长列表（如 react-window、react-virtualized）
将复杂计算放到 Web Worker 或 useDeferredValue

代码示例：React.memo 优化

import React, { memo } from "react";

type ItemProps = { value: number };

const Item = memo(function Item({ value }: ItemProps) {
  console.log("render", value);
  return <li>{value}</li>;
});

export default function List({ items }: { items: number[] }) {
  return (
    <ul>
      {items.map((v) => (
        <Item key={v} value={v} />
      ))}
    </ul>
  );
}

个人经验

阅读 React 源码有助于理解底层机制，优化更有针对性
实际项目中，优先关注重渲染、长列表、复杂计算等性能点
善用官方工具（如 Profiler）分析渲染瓶颈
结合业务场景选择合适的优化策略，避免过度优化

结合源码阅读和项目实践，分享理解渲染机制对优化的帮助。

文章作者: Edon Wang(王艺栋)

文章链接: http://edon.website/2025/05/28/React%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E5%AE%9E%E6%88%98-%E6%B8%B2%E6%9F%93%E6%9C%BA%E5%88%B6%E4%B8%8E%E4%BC%98%E5%8C%96%E5%8E%9F%E7%90%86/

版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Edon Wang's Blog！

React 性能优化

相关推荐

React 性能优化实战（一）：性能瓶颈分析方法

文章简介介绍在 React 项目中常见的性能瓶颈类型，梳理定位和分析性能问题的常用方法与工具，为后续优化打下基础。主要内容性能瓶颈的常见表现首屏加载慢，白屏时间长页面滚动、动画卡顿，FPS 低交互响应迟钝，点击、输入延迟组件频繁重渲染，CPU 占用高内存泄漏，页面长时间运行后变慢甚至崩溃性能分析的基本思路明确性能目标与关键指标（如 FCP、TTI、LCP、FPS 等）复现性能问题，收集相关数据利用工具定位瓶颈（网络、渲染、JS 执行、内存等）结合代码结构分析，找出根因制定并验证优化方案浏览器性能分析工具1. Chrome DevTools Performance 面板：录制页面性能快照，分析 JS 执行、渲染、重排重绘等耗时 Memory 面板：检测内存泄漏、对象分配 Network 面板：分析资源加载瓶颈常用操作录制性能快照，查找长任务（Long Task）查看 Main 线程耗时分布分析 Timeline，定位卡顿点 2. React Profiler用于分析组件渲染耗时、识别不必要的重渲染。使用方法（React 18 + Type...

React 性能优化实战（五）：性能监控与调优工具

文章简介梳理 React 项目中常用的性能监控与调优工具，介绍如何持续追踪和优化应用性能。主要内容性能监控的意义与核心指标在现代 React 应用中，性能直接影响用户体验和业务转化。常见的性能监控核心指标包括： FP/FCP（First Paint/First Contentful Paint）：首屏渲染时间，衡量页面首次可见内容的速度。 TTI（Time to Interactive）：页面可交互时间。 LCP（Largest Contentful Paint）：最大内容绘制时间。 FID（First Input Delay）：首次输入延迟。 CLS（Cumulative Layout Shift）：累计布局偏移。 FPS（Frames Per Second）：帧率，衡量动画流畅度。这些指标可通过 Web Vitals、Lighthouse 等工具自动采集。常用性能监控与分析工具1. Chrome DevTools Performance 面板：录制和分析页面渲染、JS 执行、网络请求等。 Memory 面板：检测内存泄漏和对象分配。 Networ...

React 性能优化实战（四）：懒加载与代码分割实践

文章简介介绍 React 应用中的懒加载与代码分割技术，提升首屏加载速度和整体性能体验。主要内容1. 代码分割的原理与意义代码分割（Code Splitting）是将应用的代码拆分为多个包，按需加载，减少首屏加载体积，提升页面响应速度。React18 支持基于路由、组件等多维度的代码分割。 2. React.lazy 与 Suspense 的用法React.lazy 允许你用动态 import 的方式按需加载组件，Suspense 用于包裹懒加载组件并自定义加载状态。 12345678910111213141516171819// src/pages/About.tsximport React from "react";export default function About() { return <div>About Page</div>;}// src/App.tsximport React, { Suspense, lazy } from "react";const...

React 性能优化实战（三）：组件重渲染与状态管理优化

文章简介聚焦 React 组件的重渲染机制与状态管理，梳理常见的性能陷阱与优化技巧，提升应用响应速度。主要内容组件重渲染的触发机制父组件重新渲染会导致所有子组件默认也重新渲染（除非被 React.memo 包裹） props 变化、state 变化、context 变化都会触发组件重渲染 forceUpdate、key 变化等也会导致组件重新挂载代码示例：父组件更新导致子组件重渲染1234567891011121314151617181920import React, { useState, memo } from "react";type ChildProps = { value: number };const Child = memo(function Child({ value }: ChildProps) { console.log("Child render"); return <div>{value}</div...