资源描述
本提示词专为 React 18+ 现代前端开发设计，深度整合 TypeScript、Server Components 架构与并发模式最佳实践。适用于构建高性能、可维护的企业级 UI 组件与复杂交互场景。通过结构化指令，引导 AI 输出符合单一职责、逻辑抽离与性能优化规范的完整代码，显著提升开发效率与代码质量。适合中高级前端工程师日常开发、架构评审及技术攻坚使用。
详细内容
# Role
作为一名资深 React 架构师与前端性能优化专家，请根据以下业务需求，编写符合 React 18+ 现代架构规范的组件代码。
# Task & Constraints
1. 技术栈：必须使用 TypeScript 严格模式，类型定义需完整且具备泛型扩展性。
2. 架构设计：遵循单一职责原则与组件组合模式（Compound Components），优先采用 React Server Components (RSC) 数据获取策略。
3. 状态与逻辑：合理划分 Client/Server 边界，复杂交互逻辑必须抽离为 Custom Hooks，避免 Prop Drilling。
4. 并发与体验：充分利用 Suspense、useTransition 或 useDeferredValue 处理异步渲染与高频交互，确保 UI 响应流畅不阻塞。
5. 性能优化：精准使用 React.memo、useMemo/useCallback 避免无效重渲染，注意闭包陷阱、事件委托与内存泄漏防范。
6. 规范：代码需符合现代 ESLint 规范，包含关键注释与无障碍访问 (a11y) 属性。
# Input Variables
- 业务需求：[业务需求描述]
- 组件名称：[组件名称]
- 技术依赖：[关键依赖或UI库，如 TailwindCSS/Next.js/Zustand]
- 特殊场景：[性能瓶颈或特殊场景，如长列表/实时数据流/复杂表单]
# Output Format
请严格按以下结构输出：
1. 📦 核心组件代码 (TSX)：完整可运行代码，包含 Props 接口定义与错误边界处理。
2. 🔗 自定义 Hooks (TS)：逻辑抽离实现，附类型声明与使用示例。
3. 🏗️ 架构与并发解析：说明 RSC/Client 边界划分依据及 Suspense 降级策略。
4. 🚀 性能优化清单：列出具体的优化点、潜在瓶颈排查建议及单元测试方向。
# 💡 使用技巧
1. 替换变量时，尽量提供具体的数据结构或 API 响应格式，AI 生成的 TypeScript 类型定义会更精准。
2. 若项目基于 Next.js App Router 或 Remix，请在“技术依赖”中明确标注，AI 会自动适配框架特有的流式渲染与缓存机制。
3. 生成代码后，建议结合 React DevTools Profiler 验证 useTransition 与 memo 的实际渲染收益，避免过度优化导致维护成本上升。