React 性能优化：从慢到闪电般快速

Source: Dev.to

先进行分析 — 不要猜测

使用 React DevTools Profiler 找出真实的瓶颈：

1. 打开 Profiler 选项卡。
2. 记录一次交互。
3. 检查哪些组件重新渲染以及原因。

记忆化

组件记忆化

import { memo } from "react";

const ExpensiveChart = memo(function ExpensiveChart({
  data,
  width,
  height,
}: ChartProps) {
  // 仅在 props 实际变化时重新渲染
  return ;
});

值记忆化

import { useMemo } from "react";

const summary = useMemo(() => ({
  total: transactions.reduce((sum, t) => sum + t.amount, 0),
  byCategory: groupBy(transactions, "category"),
}), [transactions]);

注意： React 19 在构建时引入了自动记忆化，使得在新代码中手动使用 memo/useMemo/useCallback 基本不再必要。可通过实验性的编译器标志启用：{ reactCompiler: true }。

代码拆分与懒加载

import { lazy, Suspense } from "react";

const DataViz = lazy(() => import("./DataVisualization"));

function Dashboard() {
  return (
    }>
      
    
  );
}

对长列表进行虚拟化

仅渲染可见项。对于 100 条以上的列表，使用 @tanstack/react-virtual。相较于渲染成千上万的 DOM 节点，虚拟化器的开销可以忽略不计。

状态管理

最具影响力的技巧是 将状态放在尽可能靠近使用位置的地方。频繁变化的全局状态会迫使整棵树重新渲染。

其他优化

• 对重量级路由进行代码拆分，以减小首屏包体积。
• 使用 next/image 或懒加载 优化图片。
• 通过 useDeferredValue 延迟非紧急更新。
• 启用 React 编译器（React 19）实现自动优化。
• 将重点放在 架构（状态所在位置、数据流向）上，而不是微观优化；结构良好的应用默认就快。

快速检查清单

• 先进行分析 — 不要猜测。
• 同层放置状态 — 将状态下移到树的下方。
• 对长列表进行虚拟化（100 条以上）。
• 对重量级路由进行代码拆分。
• 优化图片（next/image 或懒加载）。
• 延迟非紧急更新（useDeferredValue）。
• 在 React 19 中启用 React 编译器。
• 优先考虑架构而非微观优化。

---

探索 85+ 免费开发者工具或支持此工作。