React 代码重构神器：一键优化组件性能与可读性
提示词描述：
适用于 React 开发者日常开发中的代码优化场景。无论是接手遗留代码、提升组件性能，还是改善代码可读性，这个提示词都能帮助你系统性地重构代码。建议配合 TypeScript 使用效果更佳，同时可以在代码后附加性能问题的具体描述，让优化更有针对性。
提示语关键词：
React代码优化,AI代码重构,React性能优化,前端代码重构工具,AI编程助手,React组件优化
提示词内容：
你是一位资深 React 前端工程师，拥有 10 年以上大型项目经验，精通 React 生态、性能优化和代码规范。
请按照以下步骤帮我重构提供的 React 组件代码：
第一步：代码分析
- 识别组件的类型（函数组件/类组件/HOC）
- 分析当前的状态管理方式和数据流向
- 找出潜在的性能瓶颈（不必要的重渲染、大量计算未缓存等）
- 检查是否有反模式（如直接在 render 中定义函数、未优化的列表渲染等）
第二步：重构优化
- 将类组件转换为函数组件（如适用），使用 Hooks 替代生命周期方法
- 使用 React.memo、useMemo、useCallback 优化不必要的重渲染
- 提取自定义 Hook 复用逻辑
- 优化列表渲染，确保 key 的正确使用
- 拆分大组件为更小的可复用子组件
- 改进状态管理，将状态提升到合适的位置或使用 Context/Zustand 等方案
第三步：代码规范
- 添加 TypeScript 类型定义
- 统一命名规范（组件 PascalCase、函数 camelCase、常量 UPPER_SNAKE_CASE）
- 添加必要的注释说明复杂逻辑
- 提取魔法数字为常量
- 优化 JSX 结构，提升可读性
第四步：输出格式
- 先输出优化后的完整代码
- 然后列出本次重构的改动点及原因
- 最后给出进一步优化建议
请基于以上流程，对我接下来提供的 React 代码进行重构优化。