React Performance Optimizer 是一个面向 React 应用性能优化的技能，定位为诊断并修复性能问题，帮助应用达到流畅的 60fps 体验。资料将其定义为“擅长诊断和修复 React 性能问题”的专家型技能。
【适用场景】 资料明确列出以下情况适合使用：组件重渲染缓慢；包含超过 100 项的大列表导致卡顿；打包体积（gzip 后）超过 500KB；可交互时间超过 3 秒；滚动或动画不流畅；组件卸载后存在内存泄漏。同时明确不适合的情况包括：组件少于 10 个的应用（属于过早优化）；后端 API 慢（应修复 API）；网络延迟（应使用缓存或 CDN）；非 React 框架（应使用对应框架的工具）。
【性能诊断与决策】 技能提供快速决策树：如果 Profiler 显示渲染耗时超过 16ms，应使用 memoization；列表超过 100 项，应使用虚拟化；打包体积超过 500KB，应进行代码分割；Lighthouse 分数低于 70，需要多项优化；如果感觉已经足够快，则暂不优化。资料建议始终从 React DevTools Profiler 开始排查，并列出 2024 年可用的性能工具：React DevTools Profiler（定位慢组件）、Lighthouse（整体性能评分与前后对比）、webpack-bundle-analyzer（识别大依赖，适用于包体超过 500KB）、why-did-you-render（调试不必要的重渲染），以及 React 编译器（2024 年起，用于 React 19+ 的自动 memoization）。技术时间线方面，2018 年引入 React.memo、useMemo、useCallback；2020 年并发模式；2022 年 React 18 自动批处理；2024 年 React 编译器；2025 年及以后 React 编译器预计取代手动 memoization。
【常见反模式】 资料列举并对比了五类反模式及正确写法：一是过早 memoization，例如对字符串拼接使用 useMemo，反而增加开销；建议仅在计算超过 5ms、结果用于依赖数组或可阻止子组件重渲染时才 memoize。二是未记忆回调函数，导致每次渲染产生新函数引用，使 React.memo 失效，应使用 useCallback 配合更新函数避免依赖。三是大列表未虚拟化，渲染上万 DOM 节点导致卡顿，应使用 react-window 的 FixedSizeList 只渲染可见项，资料称可将 10000 项的 5 秒渲染降至 50ms。四是未做代码分割，全部打包进主包导致首屏加载慢，应使用 React.lazy 与 Suspense 按路由懒加载，资料称初始包可 2MB 降至 300KB。五是在渲染中执行昂贵操作，如每次渲染都对数组排序，应使用 useMemo 缓存计算结果。
【实现模式】 技能给出的模式包括：使用 React.memo 包装纯组件，并可自定义比较函数；使用 useMemo 缓存昂贵计算（如过滤与排序）；使用 useCallback 提供稳定引用；使用 react-window 的 VariableSizeList 实现可变高度虚拟化；使用 React.lazy 按路由或组件进行代码分割。
【上线检查清单】 资料提供了一份生产环境检查清单，包括：完成 Profiler 分析并定位慢组件；大列表（超过 100 项）使用虚拟化；路由用 React.lazy 代码分割；重组件懒加载；回调用 useCallback 记忆；昂贵计算用 useMemo；纯组件用 React.memo 包装；分析包体避免重复依赖；启用 tree-shaking（ESM 导入）；图片优化并懒加载；Lighthouse 分数大于 90；可交互时间小于 3 秒。
【使用与避用对照】 资料给出对照表：渲染 1000 项以上列表应虚拟化；对大数组排序过滤应用 useMemo；向已 memo 的子组件传递回调应用 useCallback；字符串拼接、简单算术、10 项列表则不需要优化。
【参考资料与脚本】 资料列出参考文档：profiling-guide.md（如何使用 React DevTools Profiler）、bundle-optimization.md（减小包体策略）、memory-leaks.md（检测与修复内存泄漏）；脚本包括 performance_audit.ts（自动化性能检查）和 bundle_analyzer.sh（分析并可视化包体）。
关于收费、价格、安装方式、具体操作步骤等信息，资料中暂未提供。