React 性能优化清单：从渲染到打包的 12 个实战技巧

渲染层优化

1. 合理使用 memo、useMemo、useCallback 避免不必要重渲染；2. 列表渲染务必提供稳定的 key；3. 大列表使用虚拟滚动（react-window / @tanstack/react-virtual）。

状态层优化

4. 避免在 Context 中存放高频变更值；5. 状态下沉，让重渲染范围尽可能小；6. 派生状态用 useMemo 而非 useState。

打包层优化

7. 路由级代码分割（dynamic import）；8. 第三方库按需引入；9. 图片使用 next/image 自动优化。