性能优化全链路

包含：

• 组件性能瓶颈定位（React DevTools Profiler）、memo/shallowEqual、懒加载（React.lazy）、虚拟列表
• 首屏加载优化（路由懒加载、CDN、压缩）、运行时优化（memo/useMemo）、构建优化（Tree Shaking）

要求：

• 用 Profiler 分析项目性能，给列表页添加虚拟滚动（react-virtualized）
• 用 Lighthouse 检测项目性能得分，实施 3 项优化（如替换 moment 为 date-fns 减小包体积）

组件层面

• 避免不必要的渲染
  • React.memo
  • useCallback
  • useMemo
• 列表渲染优化
  • 虚拟列表 react-window/react-virtualized
• 组件拆分原则
  • 单一职责、避免大组件

技能掌握

• 用 React.memo + useCallback 优化 “父子组件重复渲染” 问题
• 用 react-window 实现 “10000 条数据的长列表”，对比优化前后性能

问题

• React.memo 和 PureComponent 的区别是什么？
• 虚拟列表的实现原理是什么？react-window 和 react-virtualized 哪个更好用？

工程层面优化

• 代码分割（React.lazy + Suspense）
• 资源优化（图片懒加载、路由懒加载）
• 打包优化（Tree Shaking、减小 bundle 体积）
• 渲染优化（useDeferredValue、useTransition）

技能掌握

• 用 React.lazy + Suspense 实现 “路由懒加载”，并添加加载中状态
• 配置 Webpack 实现 Tree Shaking，分析打包后的 bundle 体积（用 webpack-bundle-analyzer）

问题

• React 18 新增的 useTransition 和 useDeferredValue 有什么用？如何使用？
• 如何排查 React 项目的性能问题？常用工具是什么？