用途：该技能用于诊断和改善 React 应用的渲染性能、包体积、Web Vitals、长列表表现、图片与媒体加载、状态放置位置以及交互响应性，强调以可测量的前后对比作为优化依据。
主要能力：覆盖 React.memo 与记忆化、useMemo 与 useCallback 使用、代码分割等方向；可针对不必要的重渲染、昂贵计算、大列表、大体积包、缓慢交互、图片与媒体加载、状态提升过高等瓶颈给出定位与修复建议。
使用方式：先测量，使用 React DevTools Profiler、Web Vitals、浏览器性能工具或打包分析器，再改动代码。随后识别瓶颈类别，应用最小范围的针对性修复，如状态共置、组合、记忆化、虚拟化、懒加载、动态导入或并发渲染 API。对媒体密集界面需保护 video 元素身份、避免重新挂载、用 ref 进行命令式控制，并用 IntersectionObserver 懒加载资源。每次改动后重新测量，只保留能改善耗时、Web Vitals、内存、解码器切换或包体积的优化。
注意事项：记忆化本身有开销，仅在测量出的热点或稳定属性边界使用 React.memo、useMemo 和 useCallback；自定义 React.memo 比较若对大结构做深比较可能比直接渲染更慢；在过滤或重排列表中使用索引作为 key 可能导致重新挂载和状态丢失，对 video 元素代价尤其高；video 是有状态的浏览器资源，重新挂载可能破坏硬件解码器和缓冲播放状态；并发特性只调度非紧急工作，不会让昂贵工作消失。技能内含完整指南与虚拟化列表指南两份参考文件。除兼容性或性能原因外，应保留用户既有的框架、库和工具选择。