①React性能优化提示词：用AI定位渲染瓶颈并生成优化代码
提示词描述：
针对React应用性能瓶颈的专业级调试提示词。适用于中高级前端开发者，结合React DevTools数据，AI可精准定位re-render根因并生成包含React.memo/useMemo/useCallback的优化代码，附带性能对比分析。
提示语关键词：
React性能优化,AI生成代码,React渲染优化,React DevTools,React性能调优,React memo优化代码
提示词内容：
【应用场景】
当React应用出现卡顿、掉帧或交互延迟时，快速定位性能瓶颈并生成优化代码。
【案例描述】
某电商后台列表页在加载1000条数据时，滚动卡顿明显。通过React DevTools Profiler发现，每次滚动都会触发全量re-render。使用本提示词，AI分析组件结构后，生成React.memo+useMemo+useCallback组合优化方案，帧率从24fps提升至58fps。
【提示词正文】
你是一位精通React性能优化的前端架构师。请分析以下React组件代码，定位性能瓶颈并生成优化方案：
1. 使用React DevTools Profiler的视角，识别不必要的re-render
2. 分析props传递链路，找出导致级联渲染的根因
3. 生成包含React.memo/useMemo/useCallback的优化代码
4. 对比优化前后的渲染次数和内存占用
【代码片段】
[粘贴待优化的React组件代码]
【使用技巧】
- 配合Chrome DevTools Performance面板的火焰图数据一起提供
- 对于复杂状态，补充useReducer或Zustand的使用场景
- 要求AI同时输出性能对比表格
【延伸用法】
- 生成React.lazy+Suspense的代码分割方案
- 设计虚拟滚动（react-window）的实现代码
- 输出Web Vitals指标的优化检查清单