用途：该资料是一份 React 组件架构实践指南，面向使用 hooks、组合模式与 TypeScript 的现代 React 开发，帮助组织可复用、可维护的组件代码。
主要能力：
- 组件设计原则：单一职责、组合优于配置（用 children 与 render props 替代 prop drilling）、就近放置（样式、测试、类型同目录）、明确受控与非受控组件的状态归属。
- 组件模式：复合组件（Compound Components）通过 Context 共享状态，如 Tabs 挂载 Tabs.List、Tabs.Trigger、Tabs.Content；渲染属性（Render Props）让调用方控制渲染，如泛型 List 接收 items、renderItem、keyExtractor；自定义 Hook 抽取可复用有状态逻辑，如 useToggle 返回 state、toggle、setTrue、setFalse；多态组件通过 as 属性渲染为不同元素，如 Box。
- Props 模式：使用可辨识联合（Discriminated Union）表达互斥的 prop 组合，如 Button 的 link 与 button 变体；用解构默认值设置默认 props。
- 性能模式：用 useMemo 缓存昂贵计算，用 useCallback 缓存传给子组件的回调，按更新频率拆分 Context，对纯展示组件使用 React.memo，用 react-virtual 等虚拟化长列表。
- 文件结构：按组件目录组织，包含 Button.tsx、Button.test.tsx、Button.types.ts 与 index.ts 重导出。
使用方式：资料以代码片段示例说明各模式写法，未提供安装命令、依赖版本或运行步骤。
适用场景：构建中大型 React 应用的组件库、设计系统或复杂交互 UI 时参考。
限制：资料未说明适用框架版本、构建工具、测试框架、许可协议或收费情况，这些信息暂未提供。