3. 组件性命周期
React严厉定义了组件的性命周期，性命周期能够会阅历以下三个历程：
- 装载历程（Mount）：也就是把组件第一次在DOM树上衬着的历程；
- 更新历程（Updata）：当组件被从新衬着的历程；
- 卸载历程（Unmount）：组件从DOM树中删除的历程。
- 三种差别的历程，React库会挪用组件的一些成员函数，即性命周期函数。
3.1、装载历程
当组件第一次被衬着时，顺次挪用的函数：
- static propTypes(createClass建立的话：propTypes)
- static defaultProps（createClass建立的话：getDefaultProps(){}）
- constructor(初始化state；createClass建立的话：getInitalState)
- componentWillMount
- render
- componentDidMount
constructor
ES6中每一个类的组织函数，要建立一个组件类的实例，便会挪用对应的组织函数
注重：- 并非每一个组件都须要定义自身的组织函数，无状况的React组件每每就不须要定义组织
函数； - 一个React组件须要组织函数目标：
- 初始化state，由于组件的性命周期中任何函数都能够要接见state，那末悉数周期中第一个被挪用的组织函数就是初始化state最理想的处所；
- 绑定成员函数的this环境：
– 由于在ES6语法下，类的每一个成员函数在实行时的this并非和类实例自动绑定的；
– 而在组织函数中this就是当前组件实例，所以，为了轻易未来挪用，每每在组织函数中将这个实例的特定函数绑定this为当前类实例：... constructor(props){ super(props); this.onClickFunc = this.onClickFunc.bind(this); }- 并非每一个组件都须要定义自身的组织函数，无状况的React组件每每就不须要定义组织
getInitialState和getDefaultProps
1. getInitialState函数的返回值用来初始化组件的this.state;
2. getInitialState只出现在装载历程，也就是说一个组件的悉数性命周期历程当中，这个函数只被挪用一次；
3. getDefaultProps函数的返回值能够作为props的初始值；
4. 两个函数都只要在运用React.createClass要领建立组件类时才会用到：const Sample = React.createClass({ getInitialState: function() { return {foo: '返回值将作为this.state的初始值'}; }, getDefaultProps: function() { return {sampleProp: '作为props的初始值'} } })5. React.createClass建立要领已逐步被Facebook官方烧毁
6. 运用ES6时,在组织函数中经由过程this.state赋值完成状况初始化；经由过程给类属性（注重是类属性，而不是类的实例对象的属性）defaultProps赋值指定的props初始值：class Sample extends React.Component{ constructor (props){ super(props); this.state = {foo: '初始值'} } } Sample.defaultProps = { sampleProps: 0 }render
- render函数是React组件中最主要的函数，一个React组件能够疏忽其他一切函数都不完成，但一定要完成render函数，由于一切React组件的父类React.Component类对除了render以外的性命周期函数都有默许完成。
- 一般一个组件要发挥作用，老是要衬着一些东西，render函数并不做现实的衬着行动，它只是返回一个JSX形貌构造，终究由React来操纵衬着历程；
- 当某个特别的组件作用不是衬着界面，或许没有东西可画时，可以让render函数返回null或许false，即通知React此组件不衬着任何DOM元素；
- 注重：render函数应该是一个纯函数，完整依据this.state和this.props来决议返回的效果，而且不要发作任何副作用，不要在render函数中挪用this.setState去转变状况，由于一个纯函数不应该激发状况的转变。
componentWillMount和componentDidMount
- 在装载历程当中，componentWillMount会在render函数之前挪用，此时还没有任何东西衬着出来，纵然挪用this.setState修正状况也不会发作从新绘制；
- componentDidMount在render函数以后挪用，但render挪用以后并不会马上挪用，而是在render函数返回的东西已激发了衬着，组件已被‘装载’到了DOM树上后，componentDidMount才被挪用，此时已绘制出实在的DOM树；
- 注重：
- render函数自身并不往DOM树上衬着或许装载内容，它只是返回一个示意JSX示意的对象（及组件实例），然后由React库依据返回的对象决议怎样衬着；
- 而React库肯定是要把一切组件返回的效果综合起来，才晓得怎样发作对应的DOM修正；
- 所以只要React库挪用一切组件的render函数以后，才有能够完成DOM装载，这时刻才会依挪用componentDidMount函数作为装载的扫尾。
- componentWillMount能够在服务器和浏览器端被挪用，而componentDidMount只能在浏览器端被挪用（由于componentDidMount是在‘装载’完成以后被挪用，且‘装载’是一个建立组件并放到DOM树上的历程，而服务器端衬着经由过程React组件发作的只是一个地道的字符串，并不会发作DOM树，即在服务器端不能够完成‘装载历程’所以没法挪用componentDidMount）
3.2、更新历程
- 跟着用户的操纵转变展现的内容，当props或许state被修正时，就会激发组件的更新历程；
更新历程会顺次挪用以下性命周期函数，个中render函数和“装载”历程一样：
– componentWillReceiveProps
– shouldComponentUpdate- componentWillUpdate
- render
- componentDidUpdate
- 并非一切的更新历程都邑实行悉数函数。
componentWillReceiveProps（nextProps）
- 并非只要在组件的props发作转变的时刻才会挪用此函数；
- 在更新历程，只假如父组件的render函数被挪用，在render函数里被衬着的子组件就会阅历更新历程，不论父组件传给子组件的props有无转变，都邑触发子组件的componentWillReceiveProps函数；
- 注重：经由过程this.setState要领触发的更新历程不会挪用这个函数；
- 由于，这个函数合适依据新的props值（也就是参数nextProps）来盘算是不是是要更新内部状况state；而更新内部状况的要领是this.setState,假如this.setState的挪用致使componentWillReceiveProps再挪用，那将是一个死循环。
shouldComponentUpdate(nextProps,nextState)
- 除了render函数，shouleComponentUpdate多是性命周期函数中最主要的一个函数；
- 由于render函数决议了该衬着什么，shouldComponentUpdate决议了一个组件什么时刻不须要衬着；
- render和shouldComponentUpdate也是React性命周期函数中唯二两个请求有返回效果的函数；
- render函数的返回效果用于构建DOM对象，shouldComponentUpdate函数返回一个布尔值，通知React库这个组件此次更新历程是不是继承；
- 在更新历程当中，React库起首挪用shouldComponentUpdate函数，假如这个函数返回true，那就继承更新历程，接下来挪用render，反之则停止此次更新历程；
- shouldComponentUpdate的参数就是接下来的props和state值；我们能够依据这两个参数，外加this.props和this.state来推断返回true或false，从而防止不必要的更新。
componentWillUpdate和componentDidUpdate
- 假如组件的shouldComponentUpdate返回true，React接下来挪用componentWillUpdate、render和componentDidUpdate；
- 和“装载”历程差别，这对函数都能够在服务器和浏览器更新阶段挪用
- 不过，一般在运用React做服务端衬着时，基础不会阅历更新历程，由于服务器端只须要产出HTML字符串，而一个装载历程就充足产出HTML字符串了，所以一般情况下，服务器端不会挪用componentDidUpdate函数，假如挪用了，申明顺序有错，须要革新。
3.2、卸载历程
- React组件的卸载历程只触及一个函数componentWillUnmount,
- 当React组件要从DOM树上删除之前，对应的componentWillUnmount函数会被挪用，所以这个函数合适做一些清理性的事情。
