react-performance

React 性能

概述

专为 React 应用提供的性能优化技能。涵盖从构建时优化（代码拆分、避免使用 barrel 文件），到运行时技巧（记忆化、过渡、content-visibility），再到诊断工具（React DevTools Profiler、包分析器）的各个方面。

**适用场景：**缩短交互时间、减小包体积、消除重复渲染、分析缓慢组件、优化大型列表、延迟加载大型依赖项、审查 React 应用性能。

**不适用场景：**通用 React 组件模式（使用 react-patterns skill）、Next.js 缓存等框架专属优化（使用对应的框架 skill）、非 React 性能优化（网络、数据库、CDN）。

快速参考

类别	技术	要点
编译器	React Compiler	在构建时自动进行记忆化；无需手动使用 memo/useMemo/useCallback
记忆化	React.memo(Component)	用于接收稳定基本类型属性、且父组件频繁重复渲染的组件
记忆化	useMemo(fn, deps)	仅用于开销大的计算：排序、筛选、构建 Set/Map
记忆化	useCallback(fn, deps)	仅在传递给已记忆化的子组件时使用；使用函数式 setState 保持引用稳定
拆分	React.lazy(() => import())	使用 <Suspense> 回退内容延迟加载大型组件
拆分	按意图预加载	在悬停/聚焦时触发 import()，提升感知速度
包	直接导入	避免使用 barrel 文件；从具体路径导入以减少模块数量
包	延后加载第三方代码	在 hydration 后加载分析和日志记录代码
重复渲染	startTransition	将非紧急更新（搜索、滚动跟踪）标记为可中断
重复渲染	函数式 setState	setState(prev => ...) 可从回调中消除对状态的依赖
重复渲染	派生状态	订阅布尔值，而非连续变化的值；在渲染期间计算
重复渲染	延后读取状态	在回调中读取动态状态（searchParams），而非在渲染期间读取
渲染	content-visibility: auto	跳过长列表中屏幕外项目的布局/绘制
渲染	提升静态 JSX	将常量元素提取到组件函数之外
性能分析	React DevTools Profiler	记录渲染、识别缓慢组件、分析火焰图
性能分析	包分析器	可视化代码块大小，找出体积过大的依赖项

常见错误

错误	正确做法
将所有内容都包装在 useMemo/useCallback 中	优先信任 React Compiler；仅对开销大的计算或传给已记忆化子组件的回调进行记忆化
对 value * 2 这类简单操作进行记忆化	简单基本类型无需记忆化；其开销高于重新计算的成本
从汇总文件导入（lucide-react、@mui/material）	从特定路径直接导入，或使用 optimizePackageImports
在初始包中加载分析/跟踪代码	使用 lazy + mounted 状态延迟加载，在水合后再加载
为布尔值检查订阅连续变化的值（窗口宽度）	使用 useMediaQuery 或派生布尔值，仅在阈值变化时重新渲染
在 useCallback 依赖数组中引用状态	使用函数式 setState setState(prev => ...) 来创建稳定的回调
使用 useEffect 根据 props 派生状态	在渲染期间计算派生值；副作用会额外增加一次渲染周期
每次渲染时都创建新的对象字面量作为 props	将静态对象移到组件外；对动态对象使用 useMemo
在开发模式下进行性能分析	始终分析生产构建；开发模式中的额外警告会影响结果

委派

• 分析并诊断性能瓶颈：使用 Explore Agent 运行 React DevTools Profiler、分析包构成并追踪级联的重新渲染
• 对现有代码应用性能优化：使用 Task Agent 实现代码拆分、添加记忆化边界并优化渲染
• 规划性能改进策略：使用 Plan Agent 按影响程度（瀑布流 > 包体积 > 重新渲染）确定优化优先级，并制定优化路线图

如果可以使用 react-patterns 技能，请将通用组件架构和 React 19 API 问题委派给它。 否则，建议使用：npx skills add oakoss/agent-skills --skill react-patterns

参考资料

• 渲染优化：memo、useMemo、useCallback、编译器、消除重新渲染
• 代码拆分：React.lazy、Suspense、动态导入、包优化
• 性能分析与调试：DevTools、性能测量、常见瓶颈