React 性能优化：每位开发者都应了解的 12 条技巧

Source: Dev.to

介绍

随着 React 应用规模的扩大，常常会变得更慢——不必要的重新渲染、庞大的 bundle、以及迟滞的交互都会导致性能不佳。好消息是？大多数瓶颈都可以通过简单的优化技巧来解决。下面是每位 React 开发者都应该了解的 12 条关键建议。

小技巧

1. 使用 React.memo

当组件的 props 未改变时，防止其重新渲染。

2. 使用 useCallback 和 useMemo

对函数和耗时计算进行记忆，以避免在每次渲染时重新创建。

3. 使用 React.lazy 进行代码拆分

仅在需要时加载组件，保持包体积小，提升首次加载速度。

4. 虚拟化大列表

使用 react-window 等库，只渲染可见项，而不是成千上万的 DOM 节点。

5. 避免在 JSX 中使用匿名函数

在 JSX 之外创建函数，避免每次渲染产生新的引用。

6. 保持状态局部化

避免把状态提升得太高——这会导致整个组件树不必要地重新渲染。

7. 优化 Context 的使用

大的 Context 会触发大范围的重新渲染。可以拆分 Context，或使用轻量级替代方案，如 Zustand、Jotai 或 Recoil。

8. 对昂贵的计算进行记忆

将耗时逻辑包裹在 useMemo 中，避免每次更新时重新计算。

9. 使用生产环境构建

生产模式会移除警告并优化性能。始终使用 npm run build 部署。

10. 使用 React Profiler

使用 React DevTools Profiler 找出慢组件、无效渲染和瓶颈。

11. 保持 Props 稳定

内联对象/数组会产生新的引用。对它们进行记忆，以防止不必要的重新渲染。

12. 对高频事件进行防抖或节流

通过限制输入、滚动或鼠标事件触发状态更新的频率，减少 DOM 更新。

最佳实践

• 保持组件小且专注。
• 使用 SSR（例如 Next.js、Remix）以获得更快的加载时间。
• 定期分析包体积。
• 使用 SWR 或 React Query 缓存 API 请求。
• 移除沉重且未使用的依赖。

结论

React 性能优化并非单一技巧——它是一系列小而有意的选择。这 12 条建议有助于减少无效渲染、提升响应速度，让你的应用保持流畅。