想明白这些问题，以后需要封装组件、框架，或功能的时候，你就不会再有类似的担忧。
如果是还处在前端入门学习阶段，一般不会遇到这样的问题，但是接下来的内容看完以后，对你的学习和练习也会有帮助，也会为你后续的成长，打下一个良好基础。
话不多说，咱们现在就开始。
首先第一个问题是，「什么时候需要封装？ 」
你有没有经历过，开发某一个功能，或者写某一段代码的时候，发现曾经好像写过类似的？
而你是不是也经常把旧代码复制到新代码中，根据要求再进行修改，充分掌握 CV 工程师的精髓？
其实在这些时候，最好的做法就是进行封装。我一直以来都是在复制行为出现两次以上时，才会进行封装，甚至有时候时间紧急的情况下，依旧会选择 CV。因为封装时会有很多考虑，不仅仅只是将代码丢到一个文件里，给几个参数就行。
知道了什么时候封装，然后你要明白，「组件到底是什么？ 」
无论是Web、移动H5、小程序、原生app中的哪种形式，都会涉及到数据的展示，数据的样式，数据的处理三个部分。这三部分在具体语言中有不同的表达，为了后面的描述，我把这三部分称作模板、样式、逻辑。
如果只封装模板和样式，那就有了容器组件，为的是可以容纳其它负责展示数据的组件。比如像 Row、Col、Layout 这样的组件，只是为了控制数据展示区域和效果。
在容器组件的基础之上，结合上逻辑，于是便有了一些最常说到的组件。比如一个 Tag 组件。这类组件可以根据你设置的属性，或数据，展示出不同的效果和内容。
而像 Tooltip 这样的组件，还能在鼠标悬浮时，显示浮窗展示更多的内容。并且为了告知你浮窗展示了，还会提供 onVisibleChange 这样的事件回调方法。
接下来我要说点不一样的。在上面提到的三部分里，逻辑部分如果将一些常用的逻辑抽出来进行封装，就有了像 lodash、jQuery、Vue、React 这样的工具框架。
所以，组件只是前端领域里，为了方便称呼组成某一个“功能”的代码集合。
既然知道了什么时候进行封装，知道了组件本质上是什么，那么你在封装组件时的困惑就少了大部分，现在你只需要知道「怎么去封装」。
大多数的组件都是为了更便利而存在。试想一下，如果一个地方变了，其他代码都需要跟着改，修改过程是不是非常得费时费力。需要你封装的组件，大多数也都是这样的情况。
那么你需要做的就只有一件事，将现有的模板、样式、逻辑，全都复制到一个文件里。
模板和样式基本上不需要修改什么，展示的数据则通过参数的形式传进来。如果代码里有逻辑分支，或者不同页面有不同的展示效果，也通过传递参数的形式进行控制。
这样，就已经完成了一个组件的封装了。如果需求有变动，你只需要在这个组件文件中进行统一处理即可。
可是一个组件到这里还没完，还会遇到许多问题，比如修改时逻辑特别复杂，担心影响到现有功能。你完全可以复制粘贴一个新的组件文件，然后再进行修改，新功能使用这个组件即可。别忘了，antd和ElementUI里，Input 和 InputNumber，也是两个组件。
而其他的，你只需要去用你现阶段能够想到的方式去改就行了，中间遇到问题就去搜集相关信息帮助你搞定，实在不行就再CV一份。
真想解决这样的问题，你自然会去网上了解各种框架是如何实现，了解更好的设计有哪些。
