react-performance

React 性能技能

使用此技能，通过可量化的前后对比证据，诊断并改进 React 渲染、包体积、Web Vitals、列表性能、图像/媒体加载、状态放置和响应速度。

何时使用此技能

当用户提出前置内容中的触发条件所涵盖的任务时使用，尤其是关于实现指导、调试、架构选择、生产环境加固或此领域对性能敏感的决策。先从此协调器入手，然后加载与所需细节程度相匹配的专项参考文件。

核心工作流

1. 修改代码前，先使用 React DevTools Profiler、Web Vitals、浏览器性能工具或包分析器进行测量。
2. 确定瓶颈类型：不必要的重新渲染、耗时计算、大型列表、包体积过大、交互缓慢、图像/媒体加载，或状态放置层级过高。
3. 实施最小范围的针对性修复：状态就近放置、组合、记忆化、虚拟化、延迟加载、动态导入或并发渲染 API。
4. 对于媒体密集型 UI，应确保 video 元素的标识稳定、避免重新挂载、使用 refs 进行命令式控制，并通过 IntersectionObserver 延迟加载源。
5. 每次更改后重新测量，只保留能改善耗时、Web Vitals、内存、解码器负载或包体积的优化。

关键注意事项

• 记忆化有开销；应在测得的热点或需要保持稳定的属性边界处使用 React.memo、useMemo 和 useCallback，而不要到处使用。
• 如果自定义 React.memo 比较函数需要对大型结构执行深度相等性比较，其耗时可能超过渲染本身。
• 在经过筛选或重新排序的列表中使用索引作为键，可能导致组件重新挂载和状态丢失；对于 video 元素，这种代价尤其高。
• Video 元素是有状态的浏览器资源；重新挂载可能会销毁硬件解码器和已缓冲的播放状态。
• 并发特性可以提升响应速度，但不会消除耗时工作；它们只会调度非紧急工作。

参考资料索引

• references/react-performance-complete-guide.md - 完整原始指南，涵盖测量、记忆化、代码拆分、虚拟化、避免渲染、并发特性、图像、包、媒体元素、解码器池和移动端视频性能。
• references/virtualization-guide.md - 此技能已维护的虚拟列表详细指南。

回复指南

• 除非有明确的兼容性或性能理由建议替代方案，否则应保留用户现有的框架、库和工具选择。
• 只有在任务确实需要时才提供可直接复制粘贴的代码；否则请指向相关参考章节。
• 对生产工作流，应说明权衡、故障模式和验证步骤。
• 优先选择无障碍、易维护且可衡量的方案，而不是巧妙的微优化。