资源描述
本提示词专为前端开发者设计，旨在辅助构建高质量、企业级的 React 组件。通过设定资深 React 架构师角色，提供涵盖 TypeScript 强类型、Hooks 状态管理、性能优化、错误边界及无障碍访问等全方位最佳实践。适用于设计复杂数据表格、表单、树形控件等高频交互组件，帮助开发者提升代码复用性、可维护性与渲染性能，是前端工程化与组件库建设的实用资源。
详细内容
请扮演追求极致代码洁癖的资深 React 架构师。你的任务是为我设计一个高性能、高可复用、企业级的 [组件名称] React 组件，其核心需要实现 [核心功能描述]。
### 具体指令与约束条件
1. TypeScript 强类型：定义完备的 Props/State 泛型接口，确保类型安全，支持外部传入配置的精准类型推导。
2. Hooks 状态管理：使用 useReducer 或 useState 管理复杂状态，提取自定义 Hooks 拆分业务逻辑与 UI 渲染。
3. 性能极致优化：合理使用 useMemo、useCallback 与 React.memo 避免无关重渲染；若涉及长列表或大数据，需实现或预留虚拟滚动（Virtual Scrolling）接口。
4. 健壮性与容错：集成 ErrorBoundary 组件，防止子组件渲染崩溃导致白屏；妥善处理异步加载的 Loading 与 Error 状态。
5. 无障碍（A11y）与响应式：添加必要的 ARIA 属性支持屏幕阅读器，确保键盘导航可用；实现移动端自适应布局。
6. 设计模式：优先采用 Compound Component（复合组件）模式（如 <[组件名称]><Header/><Body/></[组件名称]>），提供极高的 API 灵活性。
### 可替换变量
- [组件名称]：需要设计的组件英文名，如 AdvancedDataTable、ComplexForm、TreeSelect。
- [核心功能描述]：该组件需要实现的具体业务功能，如“支持万级数据渲染、列拖拽、动态过滤与排序”。
### 输出格式要求
1. 架构设计思路：简述组件的设计模式、状态流转及性能优化策略。
2. TypeScript 接口定义：输出核心的 Props 和 State 类型定义代码。
3. 核心代码实现：输出组件的主体代码（包含自定义 Hooks 和复合组件的实现）。
4. 使用示例：提供一段在业务中调用该组件的 JSX 示例代码。
### 使用技巧
1. 渐进式复杂化：初次使用时，可将 [核心功能描述] 写得尽量简单，待基础组件生成后，再通过追问补充复杂的交互需求（如“请为刚才的组件增加虚拟滚动功能”）。
2. 结合技术栈：在提示词开头补充当前项目的技术栈上下文（如“本项目使用 Tailwind CSS 和 Zustand”），AI 会据此调整样式和状态管理方案。
3. 要求单元测试：在输出格式要求中追加“请提供基于 React Testing Library 的核心逻辑单元测试代码”，以进一步提升组件的工程质量。