主题
React 项目实践
如何设计 React 组件库和 Design System？
组件库的难点是稳定契约和长期治理，不是把一组视觉样式打包发布。
面试官想考什么
- 什么组件值得进入组件库？ 考察复用和抽象判断。
- 如何设计受控、非受控和复合 API？ 考察契约稳定性。
- 主题、无障碍和视觉回归如何治理？ 考察完整工程能力。
- 如何发布 breaking change？ 考察生态和协作意识。
一句话回答
text
React 组件库要围绕稳定的用户语义设计 API，同时提供无障碍、主题、类型、测试和版本治理，而不是只复用 CSS。面试回答详解
1. 组件进入门槛
组件应有明确语义、至少多个真实场景、稳定状态模型和维护责任。一次性业务流程不应为了“复用”强行抽象，否则公共 API 会被偶然需求绑架。
2. API 设计
支持受控和非受控时要明确 value/defaultValue、open/defaultOpen 等语义，事件回调保持稳定。复合组件通过 children、Context 和语义化子组件表达结构，避免暴露内部 DOM 层级。
3. 基础能力
键盘导航、焦点管理、ARIA、错误态、loading、RTL、主题 token 和 SSR/hydration 一致性应成为组件基线。视觉 token 与业务主题分离，减少消费方覆盖内部选择器。
4. 发布治理
组件包应提供类型、文档、变更记录、单元/交互/视觉测试和迁移说明。breaking change 需要 codemod、弃用周期和回滚路径；依赖 React 版本和 peer dependency 要明确。
可直接背诵的 30 秒回答
text
我设计组件库时先定义稳定的用户语义和状态模型，再设计受控、非受控、children 和事件 API。组件基线必须包含键盘、焦点、ARIA、主题 token、SSR 一致性、类型和行为测试。发布上用语义化版本、弃用周期、迁移文档和视觉回归治理长期兼容，而不是只维护一套 CSS。扩展知识
组件库质量维度
text
语义正确 + 交互可达 + API 稳定 + 类型完整 + 测试可回归 + 发布可迁移面试官追问链
追问一：为什么不让业务方直接覆盖 CSS？
- 考察点：是否理解样式契约。
- 回答方向：允许明确的 token、slot 和 className 扩展，但避免依赖内部 DOM；否则升级会产生隐性 breaking change。
追问二：如何处理组件库和 React 新版本升级？
- 考察点：是否具备生态治理能力。
- 回答方向：用 peer dependency、兼容测试矩阵、迁移文档和渐进发布验证，不把内部实现细节当公开契约。
追问三：组件库如何证明提升了效率？
- 考察点：是否会用指标复盘。
- 回答方向：看接入时间、重复代码、UI 缺陷、无障碍问题、bundle 成本和升级成功率，而不是只看下载量。