SuperAPI AI 工具集

react-impl-performance

前端与建站

查看项目

更新于 10-15 22:18

技能介绍

用途:在优化 React 渲染性能、分析组件、减小打包体积或实现代码分割时使用,核心原则是先测量再优化,避免过早优化。

主要能力与用法:

  • React.memo:props 未变时跳过重渲染,基于 Object.is 浅比较;需保证 props 引用稳定,且不能阻止内部 state 或 context 变化引起的重渲染。
  • useMemo:缓存昂贵计算结果,依赖数组须包含所有响应式值,不可省略依赖数组。
  • useCallback:返回稳定函数引用,配合 memo 子组件;建议用更新函数移除 state 依赖。
  • React Compiler(React 19+):构建时自动记忆化,替代手写 memo/useMemo/useCallback。Vite 安装:npm install -D babel-plugin-react-compiler@latest,并在 vite.config.ts 的 babel 插件中启用,插件须最先执行;可用 "use no memo" 退出。建议安装 eslint-plugin-react-hooks@latest。
  • Profiler 组件:以 actualDuration 与 baseDuration 对比衡量记忆化效果,生产构建默认禁用。
  • React DevTools Profiler:火焰图、排名图与“Why did this render?”排查原因。
  • React.lazy + Suspense:按路由或功能做代码分割,lazy 调用须在模块顶层。
  • 打包分析:rollup-plugin-visualizer(Vite),安装 npm install -D rollup-plugin-visualizer,构建后查看 stats.html。
  • 长列表:1000+ 项时用 @tanstack/react-virtual 只渲染可见项。

限制与警告:不要给每个组件包 memo;不要在 arePropsEqual 中用 JSON.stringify;useMemo 不是语义保证,需要持久引用时用 useRef。

适用场景:组件渲染慢、初始加载慢、长列表卡顿等。其他细节暂未提供。