5个React组件优化技巧，性能翻倍
提示词描述：
前端开发者的性能急救包，针对React组件卡顿给出具体优化路径。内置5种实战策略，附带代码改造示例和性能数据对比，特别适合中大型项目迭代期使用，让渲染效率肉眼可见提升。
提示语关键词：
React优化, 前端性能提升, 组件渲染技巧, AI代码助手, 前端开发工具, React.memo使用, 虚拟列表实现
提示词内容：
【角色设定】
你正在带前端团队做性能优化，需要快速定位卡顿组件。这个提示词化身React技术顾问，提供可落地的优化方案。
【任务说明】
将组件代码粘贴到{代码片段}，说明当前问题（如渲染慢/内存泄漏/重复请求），指定优化方向（首屏加载/交互响应/内存管理）。
【使用步骤】
1. 输入组件代码及问题描述
2. 选择优化策略：
▢ 虚拟列表替代长渲染
▢ useMemo/useCallback精准控制
▢ 懒加载拆分路由
▢ 状态管理迁移
▢ Web Worker计算卸载
3. 获取带注释的优化代码+性能对比数据
【示例输出】
「原组件每次state更新重渲染56次 → 添加React.memo后降至3次
建议将计算逻辑移至useMemo，配合shouldComponentUpdate可再降40%内存占用」
【避坑指南】
过度优化反降性能！优先用React DevTools Profiler定位瓶颈，关键路径保持代码可读性比极致压缩更重要
上一页：架构文档自动化：一键生成专业级数据库字典
下一页：别再手动整理会议纪要了