React生命周期总结[亲测有效]

大家好，欢迎来到IT知识分享网。

生命周期可能会经历如下三个过程：
装载过程：把组件第一次在DOM树中渲染的过程
更新过程：当组件被重新渲染的过程
卸载过程：组件从DOM中删除的过程

装载过程：
当组件第一次被渲染的时候，依次调用的函数如下：
constructor
一个React组件需要构造函数，往往是为了如下目的：
初始化state
绑定成员函数的this环境

getIniteState
初始化组件的this.state 只有用React.createClass方法创造出来的组件才会发生作用，es6语法中无此方法

getDefaultProps
初始化组件的this.state 只有用React.createClass方法创造出来的组件才会发生作用，es6语法中无此方法

componentWillMount
既可以在服务器端被调用，也可以在浏览器端被调用

render
一个React组件可以忽略其他所有函数都不实现，但是一定要实现render函数，因为React组件的父类React.Component类对除了render之外的其它生命周期函数都有默认实现
render函数不做实际的渲染动作，它只是返回一个jsx结构的描述，最终由React来操作渲染过程
不需要渲染任何DOM元素的时候，可以让render函数返回一个null 或者 是false
render函数是一个纯函数，完全根据this.state和this.props来决定返回的结果，不要产生任何的副作用

componentDidMount
只能在浏览器端被调用，在服务器端被调用的时候，不会执行
因为“装载”是一个创建组件并放到DOM树上的过程，服务器端是无法产生DOM树的，只是一段字符串而已。所以无法再服务器端执行
此阶段，组件已经被装载在DOM树上了，可以放心获取渲染出来的任何DOM

更新过程：
当props或者state被修改的时候，就会触发组件的更新过程
componentWillReceiveProps（nextProps）
只要父组件的render函数被调用，在render函数里被渲染的子组件，都会经历更新的过程，不管父组件传给子组件的props有没有改变，都会触发componentWillReciveProps
注意 this.setState触发的更新，是不会调用这个方法的。这个方法是根据nextProps计算是否更新内部状态的state，如果this.setState的调用 触发了componentWillReciveProps，则会导致死循环
nextProps代表这一次渲染传入的props，this.props代表上一次渲染的props，两者有变化的时候，才会调用this.setState来更新组件内部的state

shouldComponentUpdate（nextProps，nextState）
决定了一个组件什么时候不需要渲染
使用恰当 可以提升性能
如果返回true，则会调用componentWillUpdate，render，componentDidUpdate，否则不会有后续的方法调用

componentWillUpdate
render
componentDidUpdate
无论更新过程发生在浏览器端还是服务器端，此函数都会被执行
实际上，在React做服务器端渲染的时候，基本上不会经历更新过程，因为服务端渲染，只需要产出HTML的字符串就好了，而装载过程就可以达到此目的，所以正常情况下，服务器端是不会调用compentDidUpdate方法，如果调用了，说明程序出错了，需要改进。

卸载过程：
componentWillUnMount：
当React组件要从DOM树上清掉之前调用，这个函数适合做一些请理性的工作
往往和componentDidMount有关，如果componentDidMount中，通过非React方法，创建了一些DOM元素，如果不删除的话，可能导致内存溢出，所以需要在componentWillUnMount中把这些DOM元素清理掉