什么是组件
组件化就好像我们的电脑装机一样，一个电脑由显示器、主板、内存、显卡、硬盘，键盘，鼠标…。
组件化开辟有以下的优点：
下降全部体系的耦合度，在坚持接口稳定的情况下，我们可以替代差异的组件疾速完成需求。
比方输入框，可以替代为日历、时刻、局限等组件作详细的完成。调试轻易，因为全部体系是经由过程组件组合起来的，在出现题目的时刻，可以用排除法直接移除组件，或许依据报错的组件疾速定位题目，之所以可以疾速定位，是因为每一个组件之间低耦合，职责单一，所以逻辑会比剖析全部体系要简朴。
进步可保护性，因为每一个组件的职责单一，而且组件在体系中是被复用的，所以对代码举行优化可获得体系的团体晋级。
在团队开辟中，组件化带来的上风是便于协同开辟，因为代码中的耦合度下降了，每一个模块都可以分拆为一个组件，比方异步要求组件，路由组件，各个视图组件。
团队中每一个人发挥所长保护各自组件，对全部运用来说是邃密的打磨。
在Javascript 的开辟中，组件化实在和模块化的意义相称，大概是依据功用、营业举行代码分别，使到这部份的代码可以被复用，比方 $、_ 这些东西库就是将功用举行模块化。
实在组件化的实质上和我们以往的模块化并没有差异。
只不过模块化是对js举行了模块的打包，而一个组件包含了对应的（css，js，数据）
组件的范例
组件化的封装思绪就是面向对象头脑；
- 基础的封装特征
- 简朴的生命周期（组件的建立，更新，卸载）
- 明白的数据活动（更具参数的差异做出差异的相应）
React组件构建
Web Components经由过程自定义元素的体式格局完成组件化，而React的实质就是体贴元素的组成，React组件即为组件元素。组件元素被形貌成地道的JSON对象，意味着可以运用要领或是类来构建。React组件基础由3个部份组成—-属性(props)、状况（state）、以及生命周期要领。
React.createClass
用React.creatClass构建组件是React最传统，也是兼容性最好的要领。
const List = React.createClass({
getDefaultProps() {
return {
color : "#f00",
text : "我是列表"
}
},
render() {
const {color,test} = this.props;
return (
<li className={`btn btn-${color}`}>{test}</li>
)
}
})
挪用的时刻只需要<List/>,每一次挪用都会被编译成React.createElement(List)要领来建立List实例，这意味着每次挪用<List/>就会建立一次li;
ES6 class
import React, {Component} from 'react';
class List extends Component {
constructor(props) {
super(props)
}
static defaultProps = {
color : "#f00",
text : "我是列表"
};
render() {
const {color,test} = this.props;
return (
<li className={`btn btn-${color}`}>{test}</li>
)
}
}
无状况函数
function List({color="#f00",test="我是列表"}){
return (
<li className={`btn btn-${color}`}>{test}</li>
)
}
无状况函数构建的组件称为无状况组件，这类构建体式格局是0.14版本后新增的，官方推重
在适宜的情况下我们都应该运用这类组件体式格局。无状况组件不像上述两种要领在挪用时会建立新实例，它建立时始终坚持了一个实例，避免了不必要的搜检和内存分派，做到了内存优化。
