为什么要进行组件的封装？
为了代码高效复用，易维护，易应用；说的直白一下就是为了自己少写代码，有更多的时间钻研更多其他方面的事物；甚至可以说是为了自己有更多摸鱼时间；
一、组件封装的核心原则
1、单一职责原则
定义：每个组件**只负责一个独立功能**或UI模块（如按钮、表单输入框）。
示例：避免将数据请求和UI渲染混合在一个组件中，应拆分为 UI组件 和 请求组件。
2、开放封闭原则
定义：组件应对扩展开放（通过配置或插槽），但对内部实现修改封闭。
实现：通过 props 暴露配置项，避免直接修改组件内部逻辑。
3、高内聚低耦合
定义：组件内部逻辑紧密相关（内聚），对外部依赖最小化（解耦）。
场景：表单验证逻辑应内聚在 FormInput 组件内，而非依赖父组件处理。
4、可复用性与可组合性
定义：组件应独立于业务场景，支持嵌套组合（如 Table 组件内嵌 TableRow）。
技巧：使用插槽（Slots）或 children 实现内容动态注入。
二、组件封装的关键要求
1、明确的接口设计
Props 定义：通过 TypeScript 或 PropTypes 声明输入类型、默认值和必填项。
interface ButtonProps {
type?: 'primary' | 'secondary';
onClick: () => void;
disabled?: boolean;
}
事件通信：使用自定义事件（如 @change）而非直接操作父组件状态。
2、状态管理规范化
受控 vs 非受控：
受控组件：状态由父组件管理（通过 value 和 onChange）。
非受控组件：内部维护状态（如 defaultValue）。
状态隔离：避免在复用组件中使用全局状态（如 Redux），除非必要。
3、样式隔离与主题支持
CSS 作用域：使用 CSS Modules、Scoped CSS 或 CSS-in-JS（如 styled-components）。
主题化：通过 Context 或 CSS 变量提供主题切换能力。
.button {
background: var(--primary-color);
}
4、性能优化
渲染优化：使用 React.memo、useMemo 或 shouldComponentUpdate 避免无效渲染。
按需加载：动态导入组件（如 React.lazy）减少首屏体积。
5、文档与示例
文档内容：说明组件用途、Props、事件、插槽及示例代码。
工具支持：使用 Storybook 或 Docusaurus 生成可视化文档。
三、组件封装的注意事项
1、避免过度封装
反例：将仅用一次的简单UI（如静态标题）拆分为独立组件，增加维护成本。
建议：通过代码重复率评估是否需要封装（如重复3次以上的逻辑）。
2、合理划分组件粒度
过粗：一个组件包含表单、表格、弹窗，难以复用。
过细：每个按钮样式都拆分为独立组件，导致碎片化。
平衡点：按功能或UI模块拆分（如 SearchBar、Pagination）。
3、处理边界条件与异常
空状态：数据为空时显示占位图（如 <EmptyState />）。
加载状态：提供 loading prop 控制加载动画。
错误处理：捕获子组件错误并降级显示（如 React Error Boundaries）。
4、可访问性（A11y）
ARIA 属性：为屏幕阅读器添加标签和角色。
<button aria-label="Close" onClick={onClose} />
键盘导航：支持 Tab 和 Enter 键操作（如表单提交）。
5、版本兼容与破坏性变更
语义化版本：通过 major.minor.patch 标识变更影响。
迁移指南：废弃旧 Props 时提供替代方案和示例。
6、测试覆盖
单元测试：验证 Props 传递、事件触发和渲染结果（使用 Jest + Testing Library）。
快照测试：监控UI意外变更（如 expect(component).toMatchSnapshot()）。
E2E测试：验证组件在真实场景中的交互。
四、实际场景示例
场景：封装一个可复用的模态框（Modal）组件
Props 设计：
interface ModalProps {
isOpen: boolean;
onClose: () => void;
title?: string;
footer?: React.ReactNode; // 自定义底部内容
children: React.ReactNode;
}
样式隔离：
/* Modal.module.css */
.overlay {
position: fixed;
background: rgba(0,0,0,0.5);
}
可访问性：
添加 role=“dialog” 和 aria-modal=“true”。
关闭时聚焦到触发按钮。
性能优化：
使用 usePortal 将模态框渲染到 body 末端，避免父组件样式影响。
按需加载模态框内容（如 import(‘heavy-library’)）。
五、工具与资源推荐
组件开发：Storybook（可视化隔离环境）、Bit（跨项目共享组件）。
测试工具：Jest、React Testing Library、Cypress。
文档生成：Docusaurus、Docz。
代码规范：ESLint（规则 react/prop-types）、Prettier。
总结：
良好的组件封装需平衡功能独立性与灵活性，通过清晰的接口、严格的隔离和详尽的文档，最终实现 “一次封装，多处复用” 的目标。
在设计时多问：
这个组件能否不修改代码直接复用到其他项目？
其他人能否仅看文档就正确使用该组件？
修改组件内部逻辑是否会影响外部调用？