组件，指的是能完成某个特定功能的独立的、可重用的代码。

React判断一个元素是HTML元素还是React组件的原则就是看第一个字母是否大写。

在HTML中使用onclick会有以下一些问题：

• onclick添加的事件处理函数是在全局环境下执行的，这污染了全局环境，很容易产生意料不到的后果；
• 给很多DOM元素添加onclick事件，可能会影响网页的性能，毕竟，网页需要的事件处理函数越多，性能就会越低；
• 对于使用onclick的DOM元素，如果要动态的从DOM树中删除的话，需要把对应的事件处理器注销，假如忘了注销，就可能造成内存泄露。

而JSX中onClick挂载的每一个函数，都可控制在组件范围内，不会污染全局空间。在JSX中的事件都采用了事件委托的方式进行处理，是在最顶层的DOM节点上添加了事件处理器。而且在unmount的时候会清楚相关的所有事件。

纯函数就是没有任何副作用，输出完全依赖于输入的函数，两次函数调用如果输入相同，得到的结果也绝对相同。

• prop是组件的对外接口，state是组件的内部状态；
• prop的赋值在外部世界使用组件时，state的赋值在组件内部；
• 组件不应该改变prop的值，可以改变state的值。

改变组件的state必须使用this.setState()函数，this.setState()做的事情，首先是改变this.state的值，然后会驱动组件经历更新过程。

React组件的生命周期

React生命周期的三个过程：

• 装载过程(Mount)：组件第一次在DOM树中渲染的过程
• 更新过程(Update)：组件被重新渲染的过程
• 卸载过程(Unmount)：组件从DOM树中删除的过程

装载过程

依次调用constructor、getInitialState、getDefaultProps、componentWillMount、render、componentDidMount。

constructor

一个React组件需要constructor函数，往往是因为：

• 初始化state，因为组件生命周期中任何函数都可能要访问state，那么整个生命周期中第一个被调用的构造函数自然是初始化state最理想的地方；
• 绑定成员函数的this环境；

getInitialState和getDefaultProps

只有用React.createClass方法创造的组件类才会发生作用，在ES6中，在constructor中完成state的初始化，使用defaultProps设置prop的初始值。

render

render函数并不做实际的渲染动作，只是返回一个jsx描述的结构，最终由React来操作渲染过程。如果不需要组件渲染任何结构，那么可以让render函数返回null或false。

componentWillMount和componentDidMount

componentWillMount会在render函数之前调用，componentDidMount会在render函数之后调用。

componentWillMount发生在“即将要装载”的时候，这个时候没有任何渲染出来的结果，即使调用this.setState修改状态也不会引发重新绘制，可以在componentWillMount中做的事情，都可以提前到constructor中去做，可以认为这个函数存在只是为了与componentDidMount对称。

render函数调用完后，componentDidMount并不是会被立即调用，componentDidMount被调用的时候，render函数返回的东西已经引发了渲染，组件“已经被装载”到了DOM树上。

render函数并不往DOM树上渲染或者装载内容，它只会返回一个jsx表示的对象，然后由React库来决定如何渲染，而React库是会把所有组件返回的结果综合起来，才知道该如何产生对应的DOM修改。所以componentDidMount会在页面所有组件都render完毕后才被调用。

componentWillMount可以在服务器端被调用，也可以在浏览器端被调用，componentDidMount只会在浏览器端被调用。

componentDidMount可以做一些AJAX获取操作来填充组件的内容，因为此时组件已经被装载到DOM树上了，可以修改或获取DOM。

更新过程

更新过程会依次调用componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate。

componentWillReceiveProps(nextProps)

只要父元素的render函数被调用，在render函数里面被渲染的子组件就会经历更新过程，不管父组件传给子组件的props有没有改变，都会触发子组件的componentWillReceiveProps函数。

通过this.setState方法出发的更新过程不会调用这个函数，这个函数适合根据新的props值（即参数nextProps）来计算出是不是要更新内部状态state，而更新内部状态的方法就是this.setState，如果this.setState的调用导致componentWillReceiveProps函数再一次被调用，就会陷入死循环了。

shouldComponentUpdate(nextProps, nextState)

是React生命周期中除render之外最重要的函数，render函数决定了该渲染什么，shouldComponentUpdate决定了一个组件什么时候不需要渲染。

render和shouldComponentUpdate也是唯二个要求有返回结果的函数，render函数的返回结果用于构造DOM对象，shouldComponentUpdate返回一个布尔值，如果是true，则继续更新过程，调用render，如果是false，则立刻停止更新过程，也就不会继续渲染了。

shouldComponentUpdate可以提高React组件的性能。this.setState函数引发更新过程的时候，并不是立刻更新组件的state值，在执行到shouldComponentUpdate的时候，this.state依然是this.setState执行前的值，所以就可以对this.props、this.state、nextProps和nextState进行比对。

componentWillUpdate和componentDidUpdate

如果组件的shouldComponentUpdate函数返回true，React接下来就会依次调用对应组件的componentWillUpdate、render和componentDidUpdate函数。

componentDidUpdate函数并不是只在浏览器端执行，无论更新过程发生在服务器端还是浏览器端，该函数都会被调用。但是正常情况下服务器端不会调用componentDidUpdate。

卸载过程

只有一个函数componentWillUnmount

componentWillUnmount

当React组件要从DOM树上删除掉之前，对应的componentWillUnmount函数会被调用，所以这个函数适合做一些清理性的工作。

componentWillUnmount中的工作往往和componentDidMount有关，比如，在componentDidMount中用非React的方法创建了一些DOM元素，如果撒手不管可能会造成内存泄露，就需要在componentWillUnmount中把这些创造的DOM元素清理掉。