性能优化
Memo、Virtual List、Code Split,打造高性能 React 应用
官方文档
React 性能优化权威
React 官方文档中的性能优化指南
React Profiler
使用 Profiler 分析组件渲染性能
渲染优化
React.memo推荐
组件级别的浅比较缓存,避免无效重渲染
useMemo & useCallback
值缓存与回调缓存,减少子组件重渲染
状态下沉
将状态放置到需要的最小组件层级
加载优化
Code Splitting
React.lazy + Suspense 实现路由级代码分割
虚拟列表
react-window / react-virtuoso 长列表渲染优化
图片懒加载
Intersection Observer 实现图片按需加载
调试工具
React DevTools
Chrome/Firefox 扩展,分析组件树与性能
Chrome Performance
浏览器性能面板分析渲染、脚本耗时
why-did-you-render
自动检测不必要的 React 重渲染