react.js性能优化怎么做

在 React.js 中，性能优化的核心目标是：减少不必要的渲染、降低计算成本、提升交互流畅度。下面从 原理 → 常用手段 → 进阶方案 系统讲一下。

一、React 渲染机制基础（先理解再优化）

React 性能问题的根源通常是：

• 组件不必要的 re-render
• 大量计算阻塞主线程
• DOM 操作过多

React 的渲染流程：

state/props 变化 → 虚拟 DOM diff → 更新真实 DOM

二、最常用、最有效的优化手段

1. 使用 React.memo（函数组件）

避免父组件更新导致子组件无谓渲染。

const Child = React.memo(function Child({ value }) {
  return <div>{value}</div>;
});

✅ 适用于：

• 纯展示组件
• props 变化频率低

⚠️ 注意：

• props 是对象/函数时容易失效（引用变化）

2. 使用 useMemo 缓存计算结果

避免重复计算。

const total = useMemo(() => {
  return list.reduce((a, b) => a + b, 0);
}, [list]);

✅ 适用于：

• 大数据计算
• 复杂派生数据

3. 使用 useCallback 缓存函数

避免函数引用变化导致子组件 re-render。

const handleClick = useCallback(() => {
  console.log('click');
}, []);

✅ 配合 React.memo 使用效果最好

4. 避免在 render 中创建新对象 / 新函数

❌ 错误示例：

<Child style={{ color: 'red' }} onClick={() => {}} />

✅ 优化方式：

const style = { color: 'red' };
const onClick = () => {};

5. 列表优化：key 正确使用

list.map(item => <Item key={item.id} />)

❌ 不要使用 index 作为 key（列表变动时性能差）

三、组件级优化策略

6. 拆分组件（细粒度）

大组件 → 小组件

<Form />
<Table />
<Chart />

好处：

• 局部更新
• 更容易 memo

7. 使用 shouldComponentUpdate（类组件）

shouldComponentUpdate(nextProps) {
  return nextProps.value !== this.props.value;
}

（函数组件用 React.memo 替代）

8. 懒加载组件（Code Splitting）

const Chart = React.lazy(() => import('./Chart'));

配合：

<Suspense fallback={<Loading />}>
  <Chart />
</Suspense>

✅ 减少首屏体积

四、状态管理优化

9. 状态下放（避免全局 re-render）

❌ 错误：

const [count, setCount] = useState(0); // 放在顶层

✅ 优化：

• 状态尽量放在使用它的组件
• 或使用 zustand / jotai / redux selector

10. 使用选择器（Selector）

const count = useSelector(state => state.count);

避免整个 store 变化导致组件更新。

五、渲染性能工具 & 进阶

11. 使用 React DevTools Profiler

• 查看哪些组件 re-render
• 查看渲染耗时

12. 虚拟列表（长列表必做）

✅ 推荐库：

• react-window
• react-virtualized

<FixedSizeList height={400} itemCount={1000} itemSize={35}>
  {Row}
</FixedSizeList>

13. 防抖 / 节流（输入、滚动）

const onChange = debounce(handleChange, 300);

14. 并发渲染（React 18+）

import { startTransition } from 'react';

startTransition(() => {
  setSearchQuery(value);
});

✅ 非紧急更新不阻塞 UI

六、常见性能反模式 ❌

• 在 render 中发请求
• 不必要的 Context 使用
• 大组件 + 高频 state
• 滥用 useEffect

七、总结一句话

React 性能优化 = 减少 re-render + 减少计算 + 延迟加载

如果你愿意，我可以：

• 针对你当前项目给优化建议
• 用具体代码示例分析性能问题
• 对比 React 17 / 18 优化差异

你现在用的是 函数组件还是类组件？React 版本是多少？