在 React 项目中，你会采用哪些步骤来设计并封装一个全局公共组件？请说明你的实现思路和关键考量。
考察说明
考查候选人对于组件化设计、复用性和可维护性的理解，以及在实际项目中封装公共组件的工程实践能力。
回答思路
- 【回答框架 1】公共组件的封装通常遵循组件设计原则：单一职责、接口清晰、可复用。首先需要明确组件的功能边界，确定其输入（props）和输出（事件回调），并保持组件的无状态或状态可控，便于外部管理。
- 【回答框架 2】命名与文件组织需统一规范，例如使用 PascalCase 命名，放在公共组件目录（如 components/common）下，并配以文档或类型定义（如 PropTypes 或 TypeScript 类型），提升可维护性。
- 【回答框架 3】样式解决方案需统一，可采用 CSS Modules、styled-components 或 Tailwind 等，避免全局样式冲突，并通过主题变量或配置支持个性化定制。
- 【回答框架 4】考虑组件的扩展性，通过复合组件（compound component）或渲染属性（render props）模式提供灵活性，同时注意避免过度设计。
- 【回答框架 5】最后，通过单元测试和 Storybook 等工具进行验证和演示，确保组件质量和可复用性。
- 【关键点 1】组件设计需遵循单一职责和接口清晰原则。
- 【关键点 2】统一命名与目录结构，配以类型定义和文档。
- 【关键点 3】选择合理的样式方案，避免全局污染。
- 【关键点 4】通过复用模式（如 render props）增强扩展性。
- 【关键点 5】用测试和文档保障组件质量。
- 【易错点 1】过度设计导致组件过度泛化，维护成本高。
- 【易错点 2】陷入样式细节，忽略组件逻辑复用。
- 【易错点 3】未考虑主题定制，导致难以适配多场景。