前端组件化开发
随着前端生态jade、less、scss、typescript和webpack等工具的完善，前端组件化开发效率已经有了很大的提升。
特别是像Ant Design、Element UI、iView这些优秀的前端组件库的流行，更是将组件化开发效率发挥到了极致。特别是在做管理系统的页面，脚手架的搭建、添加依赖包、配置路由、创建页面、引入组建，很快就可以搭建一个系统。
什么是前端组件化开发
可能你遇到过这种情况，一个页面的js文件可能包含几百甚至上千行代码。这种代码又臭又长，读懂已经很难了，更别说维护。
这个时候就需要利用组件化开发，进行功能拆分，封装组件，单独维护。
前端组件化开发就是将页面的某一部分独立出来，将这一部分的数据层（Model），视图层（View），控制层（Controller）用黑盒的形式全部封装到一个组件内，然后暴露一些开箱即用的属性和函数供外部组件调用。
一个前端组件，包含了html、css、javascript，基本上涵盖了组件的所有内容。外部只要按照组件设定的属性、函数及事件处理进行调用即可，完全不比考虑内部实现逻辑。组件是一个完全的黑盒。
有一些比较常用的前端组件，如vue-router、vuex、react-router，redux等，都是基于Vue和React的组件，它们只专注于路由、状态存储的工作，并且把这些事情做好。
只要利用好组件化开发，开发一个页面就像搭积木一样，将各个组件拼接到一起，最后融合到一起就是一个完整的系统。
组件化开发的优点
降低系统各个功能的耦合性，提高了功能内部的聚合性，降低开发复杂度，提高开发效率。
如何设计一个组件
专一
一个组件只专注做一件事情，并且把这件事做好
可配置型
组件除了要展示默认的内容，还需要做一些动态的适配，最基本的方式是通过属性向组件传递配置的值，然后在组件初始化的生命周期内，通过读取属性的值做对应的修改；还有一些方法，通过调用组件暴露的函数向函数传递有效的值；向组件传递特定事件，并在组件内监听该事件。
在做可配置性时，为了让组件更健壮，保证组件接收到的是有效的属性和参数。
组件的生命周期
一个组件，需要明确知道在生命周期的不同阶段做该做的事。
React提供了一些生命周期函数：componentWillMount, conponentDidMount, componentWillRecieveProps, shouldComponentUpdate, componentWillUpdate, componentDidUpdate, render, componentWillUnmount,…
Vue中提供了一些生命周期函数：beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed,…