43. 🎯 组件架构 Component Architecture ★★★★☆
🌏 Web 网页规范
- Compound Components: 通过 React Context 共享隐式状态，子组件自由组合
- Headless UI: 行为逻辑与视觉呈现完全分离，只提供无样式的逻辑 Hook
- Polymorphic as prop: 运行时替换渲染元素类型 (div/a/button)，保持类型安全
- Slot/Render Props: 通过插槽或渲染函数注入自定义内容，实现最大灵活度
📱 App 移动端规范
- ViewModifier 链: SwiftUI 修饰器链式调用，顺序敏感影响最终渲染结果
- CompositionLocal: Compose 依赖注入机制，跨层级传递主题/状态无需 prop drilling
- Platform Bridge: RN 的 JS Bridge 桥接原生组件，Native Module 注册自定义模块
- Adaptive Wrapper: 平台自适应包装器，同一 API 内部按平台分发不同原生实现
Compound Components（复合组件）模式让一组子组件通过内部 Context 共享状态，使用者像拼积木一样自由组合 Tab/TabList/TabPanel，无需关心内部状态传递。Headless UI（无头 UI）哲学将组件的行为逻辑（键盘导航、焦点管理、ARIA 属性）与视觉呈现彻底解耦——库只提供 useTabs() 等 Hook 返回状态和方法，开发者用自己的 JSX/CSS 渲染任意外观。Controlled vs Uncontrolled 语义决定了组件状态由外部 props 驱动还是内部管理：受控模式让父组件拥有完全控制权（适合表单联动），非受控模式让组件自治（适合快速原型）。Polymorphic as prop 允许运行时替换渲染标签——一个 Button 组件可以渲染为 button、a 或自定义组件，同时保留 TypeScript 类型推导。良好的 Component API 设计遵循最小惊讶原则：合理的默认值、一致的 prop 命名、明确的逃生舱口（escape hatches）。
SwiftUI 的 ViewModifier 链是声明式组合的核心——每个修饰器包装前一个视图产生新视图，顺序至关重要：先 padding 再 background 让背景填满 padding 区域，反过来则只覆盖内容区。Jetpack Compose 使用 CompositionLocal 实现跨层级的隐式依赖注入，类似 React Context 但编译期类型安全，常用于传递主题色、排版配置等全局状态而无需逐层传递 props。React Native 通过 JS Bridge 桥接 JavaScript 与原生组件——JS 端描述 UI 树，Bridge 序列化命令后由原生端执行渲染，这是 RN 性能瓶颈的根源。平台自适应包装器（Adaptive Wrapper）对外暴露统一 API，内部根据 Platform.OS 分发 iOS 和 Android 各自的原生实现，让业务层代码保持平台无关。