一、为什么我们需要组件化
在使用 React 之前，我是不知道什么是组件的，我从转到前端岗位后，直接就上手 React 做一个可视化的数据大屏，那时候完全不知道什么叫组件，也不知道 React 是什么东西，就是赶鸭子上架，硬着头皮上，其艰难程度可想而知。包括我来参加前端训练营前，对组件的概念也只是停留在 Vue 或者 React 里面 export 出来的那种才叫组件。
以前开发网站，前端页面是由后端生成的，配合 jQuery 和 bootstrap 就能开发出网站来了，但还是有很多可以进步的空间，比如在使用库方面，以前是下载到本地再引入使用，后来为了解决使用库方便一点，就出现了 bower，然后为了能解决库的依赖问题，让使用再方便一点，就出现了模块化的思想，模块化也为组件化提供了更方便的使用途径。
再说到为什么需要组件化开发，以前基本上每个页面都有 js 逻辑，有些差不多的逻辑就是复制粘贴再改改，除非特别公用的才会在全局引入，在现在看来可谓是刀耕火种的时代，开发效率远不如今。比如要写一个轮播图，看看设计稿，再看看手头上的轮播库，想想还是自己写吧，完全是根据设计稿来定制的，别人拿去了也不好用，到后来才慢慢有了一些有丰富配置项的轮播库，这就是组件化的开端，说明人们对这个东西是有需求的。
二、组件化用来解决什么问题
首先我们来看看现在的组件化都拥有哪些东西，给我们带来了哪些好处。
从 vue 和 react 的组件上来看，一个组件至少拥有以下这些东西：property、attribute、渲染到页面的方法、生命周期、内部的状态等等。
其中 property 和 attribute 是组件得以跟外部沟通和交互的桥梁，vue 和 react 在这一点上的思想都是一致的，至少在使用上我感觉是一样的。
渲染页面的方法也几乎都是一样的，因为 vue 比 React 多做了一步，就是使用了自己的 .vue 格式的文件，通过 vue-template-compiler 把这个文件编译成函数，这个函数里面就有一个render函数，就跟 react 的一样了。
再看生命周期，几乎都有 beforeCreate，created，mounted 和 destroyed 这些方法，目的是为了能让组件在指定阶段具有一定的可控性。
还有就是内部状态了， vue 使用了一个函数返回了一个对象，react 直接使用 this 定义内部状态，其本质也都差不多。
到这里就能看出点名堂了，不管是 vue 还是 react ，好像它们内部实现的东西都差不多。我们再来进一步抽象，只要是实现了以上这些功能的函数，就可认为它是具有一定体系的，活的，功能完善的组件，因为只有达到这种条件，所定义的组件才能够被方便地运用和复用。
让我产生上面这种对组件的抽象思想是在 winter 给我们讲完两节线下课后才明白过来的。
再返回来对比没有组件化开发的时候，我们是不具备以上这些东西的，甚至在实际开发的时候都不会产生以上这些想法，所写的东西在封装性、体系性和复用性上是很差的。
最后我根据我的理解给组件下一个定义：组件可以理解为一个不仅具有属性、方法和继承关系，还包含了 state(内部状态)，attribute(特性)，lifecycle(生命周期)，UI 和交互逻辑在内的对象。它是偏向运行时的一个功能单元，拥有着复杂的控制。可以看到它比一般意义上的对象多了很多东西，正因为多了这么些东西，所以把它叫做组件。
三、如何实现组件化
我们在写黑白棋练习编程能力的时候，就是先实现一点功能，接着优化，把一些功能独立的逻辑用函数封装一下，写完后，又使用 class 来进行一个完整的功能封装，其实这就可以看成是一个组件了，因为它也有自己的 UI 和内部交互逻辑。
这只是写一个组件，如果我们要具体实现组件化就需要考虑更多一点的东西。比如，组件机制是什么样的？
组件机制是实现组件化的基石，它决定了你的组件将来会长成什么样子，怎么用，好不好用。
一般来说，组件机制有组件的创建和挂载是什么样的，一个组件如何被创建出来有多种方式，vue 和 react 的差距就很大了，还有在什么时机挂载组件，进而才能够渲染组件。
第二个是组件的生命周期是如何定义的，要定义多少个，最基本的生命周期有三个，即创建、挂载和卸载，为了能让你的组件更具可控性，你可以定义更多的生命周期，像 vue 就定义了很多生命周期，在 create 前还有一个 beforeCreate，精细化组件的控制细粒度。
第三个是事件，这里的事件主要是组件能够与外部进行通信的机制，vue 定义了 $emit 方法，react 直接使用属性的方式，但是 vue 的属性也是可以传函数的，也就可以用作事件通信。
第四个是 attribute 和 property，这两个单词可以理解为特性和属性，attribute 强调描述性，只能是字符串，比如 img 标签的 src，a 标签的 href 等都属于 attribute 的范畴，而 property 强调的是从属关系，比如某个属性是只属于某个组件的，给这个组件定义了这个属性，那么属性值只能是通过内部的 js 来设置。
第五个是 children，children 是组件中一个非常重要的机制，组件支不支持以及如何添加如何渲染都需要考虑到，在 winter 给我们讲组件化的时候，也是自己写方法来添加 children 的，这里给出一个代码段：
for (let child of children) {
if (child instanceof Array) {
for (let c of child) {
if (typeof c === 'string') {
cmp.appendChild(new Text(c));
} else {
cmp.appendChild(c);
}
}
} else if (typeof child === 'object') {
cmp.appendChild(child);
} else {
cmp.appendChild(new Text(child.toString()));
}
}
第六个就是用什么方式来描述你的组件，目前常见的就是以自定义 html 标签的方式来描述，vue 和 react 在这方面也是一致的，而且它们都支持 JSX 语法，vue 还支持单文件组件这种更加友好的方式。
完成了组件机制的考量，接下来就是构建自己的组件体系，这一步不是必须的，但是如果你构建了自己的组件化体系，那么在开发页面时就能达到事半功倍的效果。
最基本的组件体系包括了 layout，input，form，table 和 message 等等，这些东西能够支撑你后续的整个开发过程，目前咱们在开发的时候多少都会使用到一些 UI 框架，比如 element-ui ，antd 等，他们都各自拥有一套组件体系，大体上都是一致的。
