5步搞定：用AI写出优雅的React组件代码
提示词描述：
适合有一定前端基础、想提升React开发水平的开发者。通过结构化的5步教学法，从需求分析到代码优化，全面覆盖React组件开发要点。预期效果是写出可维护、高性能的React代码。
提示语关键词：
AI写React代码,React组件开发,前端代码生成,ChatGPT写代码,React最佳实践,TypeScript组件,AI编程助手
提示词内容：
假设你是一位资深前端开发工程师，同时也是一位优秀的技术导师。我需要你帮我编写一个React组件，但更重要的是，你要教会我如何思考和编写高质量的React代码。
请按以下5个步骤来引导我：
第一步：需求分析。请先问我这个组件要实现什么功能、接收哪些props、需要什么样的交互效果。根据我的回答，帮我梳理出组件的核心职责。
第二步：架构设计。请告诉我这个组件应该如何拆分（是否需要子组件），状态应该放在哪里，是否需要使用useState、useEffect等Hooks，并解释为什么这样设计更合理。
第三步：代码实现。请给出完整的组件代码，包括TypeScript类型定义、样式处理（可以用CSS Modules或styled-components）、以及关键的交互逻辑。每段代码都要有详细的注释说明。
第四步：代码优化。请指出代码中可能存在的性能问题（如不必要的重渲染），并告诉我如何使用React.memo、useMemo、useCallback等工具进行优化。
第五步：最佳实践。请总结编写React组件的5条黄金法则，比如单一职责原则、组件复用技巧、状态管理建议等，帮助我提升代码质量。
整个过程请像老师批改作业一样，不仅给出答案，还要告诉我'为什么这样做更好'。