用途：本技能用于系统学习并实施 React 应用的性能优化，帮助识别渲染瓶颈、减少不必要渲染、缩小打包体积并监控真实用户体验指标。
主要能力：使用 React DevTools Profiler 录制并分析渲染耗时、提交次数、火焰图与排名图；通过 React.memo、useMemo、useCallback 实现记忆化；利用 lazy 与 Suspense 做基于路由和基于组件的代码分割；使用 react-window 的 FixedSizeList 虚拟化长列表；通过 IntersectionObserver 实现图片懒加载；用 source-map-explorer（Create React App）或 rollup-plugin-visualizer（Vite）分析打包体积；用 web-vitals 采集 CLS、FID、FCP、LCP、TTFB 指标。
使用方式：先用 Profiler 定位瓶颈再优化。React.memo 可防止 props 未变时的重渲染，并支持自定义比较函数；useMemo 缓存计算结果，useCallback 保持函数引用稳定；代码分割配合 Suspense 的 fallback；长列表用虚拟化组件按高度与 itemSize 渲染可见项；打包分析命令：npm install --save-dev source-map-explorer、npm run build、npx source-map-explorer 'build/static/js/*.js'；Vite 下 npm install --save-dev rollup-plugin-visualizer。指标采集通过 getCLS、getFID、getFCP、getLCP、getTTFB 传入回调。
适用场景：频繁渲染、超过 100 项的大列表、昂贵计算、深层组件树、需要控制打包体积与图片加载的应用。
限制：简单组件、极少渲染、廉价计算与小于 50 项的列表不建议优化；避免过度使用 useMemo 与在依赖项中内联对象；资料未提供具体收费、平台支持范围与效果数据。难度为高级，预计学习时间 2-3 周，前置要求为 React Hooks 与组件架构。