什么是组件？
把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在Vue中每一个.vue/.tsx文件都可以视为一个组件。
组件化的好处？
- 降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现
- 调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单
- 提高可维护性和扩展性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级
组件的类型?
目前组件设计的主流分类方案有2种，分别是灵巧组件和展示组件。
展示组件内部没有状态管理，仅仅用于最简单的展示表达。展示组件中最基础的一类组件称作代理组件。代理组件常用于封装常用属性、减少重复代码。很经典的场景就是引入 Antd 的 Button 时，进行再次封装。如果未来需要替换掉 Antd 或者需要在所有的 Button 上添加一个属性，都会非常方便。基于代理组件的思想还可以继续分类，分为样式组件与布局组件两种，分别是将样式与布局内聚在自己组件内部。
灵巧组件由于面向业务，其功能更为丰富，复杂性更高，复用度低于展示组件。最经典的灵巧组件是容器组件。在开发中，我们经常会将网络请求与事件处理放在容器组件中进行。容器组件也为组合其他组件预留了一个恰当的空间。还有一类灵巧组件是高阶组件。高阶组件被 React 官方称为 React 中复用组件逻辑的高级技术，它常用于抽取公共业务逻辑或者提供某些公用能力。常用的场景包括检查登录态，或者为埋点提供封装，减少样板代码量。高阶组件可以组合完成链式调用，如果基于装饰器使用，就更为方便了。高阶组件中还有一个经典用法就是反向劫持，通过重写渲染函数的方式实现某些功能，比如场景的页面加载圈等。
组件的划分？
以最小颗粒度进行划分（这个需要自己拿捏，没有统一标准），并遵循单一功能原则。
工程化的角度?
从工程实践而言，通过文件夹划分的方式切分代码。通用组件我会创建一个components文件夹进行通用组件的管理，私用组件我们在当前页面中创建一个components文件夹。
组件的设计？
1、确定UI组件的HTML结构与样式，这个没什么说的就是写HTML和CSS样式。
2、数据结构的设计：用数据描述所有的内容，数据要结构化。易于程序操作（遍历、查找）。
3、设计API：这个就是组件内的方法。
4、实现用户控制：用户可以使用的方法。
