携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情
组件化目的：让页面中的各个部分可以被复用，以减少重复的代码。
一、为什么要做组件库
你是否有这样的疑问：市场上那么多开源的组件库，为什么不直接拿来用？为什么还要自己花费大量的时间来自己写一套组件库？
别着急，先让我们来看看目前在业务团队中，前端同学们的开发模式。
- 前端同学们一般会在拿到需求以及原型后，先进行需求评审、可行性分析等工作。（这一步不详说，不是我们的中断）
- 之后会根据UI提供的设计图，进行页面的开发
通用组件
在开发过程中，我们会发现设计师们总会依据开源UI组件库进行魔改一番，就是自己的设计了（真好，我也能当设计师了）。
他们轻松了，我们前端可就苦逼了。
一点小小的改动，可能就得开源UI库的基础上改半天，甚至完全无法在其基础上实现（用到了的功能开源组件库的类似组件上没有提供），这时我们就只能自己来封装相应的组件了。
为了彻底解决这个麻烦，提升开发效率，你可以选择 fork 一份开源UI库的代码，自己进行修改之后，提到 npm 上，这也是最简单高效地。弊端就是别人有一套自己的代码维护规则、以及实际的代码实现方式（学习成本太高，毕竟小白很难一下看懂大神的代码），强行修改的话可能会造成后期一些奇奇怪怪的问题。
业务组件
业务组件就更不用说了，和每个公司具体的业务挂钩，这个是一定需要自己封装实现的。会很大程度上提升开发效率。
二、组件化的意义
- 让我们可以独立维护每一个组件
- 组件之间可以自由结合
- 降低代码的耦合性
三、上面都是大帽子话，来看看现实点的
- 现在的工作中都是组件化的开发，可以大幅度提高开发效率、提高代码复用性。
PS：开发速度快，更方便摸鱼了 - 复杂的组件能够提高自身的编程能力。
- 组件的设计，在完善过程中会提升自己的逻辑能力、交互能力（组件设计、接口设计）
- 逻辑能力：在树组件中，使用者不需要关心内部复杂的实现、递归等，他只需要关心输入和输出，以及组件提高了哪些事件即可。
- 交互能力：良好的组件交互会让使用者更加舒服。包含良好的命名以及特定的事件派发（组件使用者层面），还有视觉效果、过渡等（真实效果）
- 提升工程化能力：
- 提取组件公共方法
- 写测试用例
- 写组件使用文档
- 项目中脚手架的工具---方便自己的组件开发
- 打包、发布
- 为低代码平台提供物料基础
