React生命周期如下图所示：
React生命周期
如上图，react生命周期主要可以分组件挂载、组件更新及组件卸载三个部分。
一、组件挂载
组件挂载主要是完成组件状态的初始化，设计两个生命周期函数：componentWillMount和componentDidMount。主要包含以下几个点：
-
static propTypes={} 和 static defaultProps={}： 分别定义了组件的props类型检查和默认参数。static表明这两个属性被声明为静态属性，意味着从类外面也可以访问他们，比如：类名.propTypes。
-
constructor()： 用于组件初始化工作，如：定义this.state的初始内容。constructor()接受两个参数：props,context，是指父组件传下来的的props,context。注意：如果想在constructor()内部使用props或context，需要将props、context传入super()，在组件其他地方可以直接使用。
-
componentWillMount： 在组件挂载到DOM前调用，因此在这里调用this.setState不会引起组件重新渲染。
-
componentDidMount： 在组件挂载到DOM后调用，在这里调用this.setState会触发组件再次渲染，并且在此时，dom节点已经生成，故而可以在此获取真实dom、进行ajax请求等。
注意： componentWillMount 和componentDidMount 只会执行一次，即组件第一次初始化时。
二、组件更新
组件更新涉及四个生命周期函数：componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、componentDidUpdate。下面按触发的先后顺序进行介绍。
-
componentWillReceiveProps（nextProps）： 在接收父组件改变后的props时触发。可以通过比较传入的nextProps与当前this.props，对组件进行操作。
-
shouldComponentUpdate（nextProps, nextState）： 唯一一个用于控制是否让组件重新渲染的生命周期函数。如果不想让组件重新渲染，return false即可。
-
componentWillUpdate (nextProps,nextState)： shouldComponentUpdate（nextProps, nextState）返回true之后，就会触发组件重新渲染，进入componentWillUpdate 函数。
-
componentDidUpdate(prevProps,prevState)： 组件只有在第一次更新完成后才会进入componentDidmount，之后都是进入componentDidUpdate。prevProps和prevState是更新前的props和state。同componentDidMount ，componentDidUpdate()执行时，dom也已经真正被添加到HTML中，故也可在此对dom进行操作。
补充说明：
-
造成组件更新的情况有两类：一类是props变化，另一类是state变化。
第一类情况就是当父组件重新渲染的时候，props重传导致。此时，无论props是否发生变化，子组件都会重新渲染。此处，可通过上述componentWillReceiveProps(nextProps)进行优化。
第二类情况就是组件本身调用this.setState()引起，无论state是否变化，都会重新渲染。但由于是自身引起，故不会触发componentWillReceiveProps方法。另外，此种情况同样可通过shouldComponentUpdate(nextStates)优化。
-
只有在componentWillMount、componentDidMount、componentWillReceiveProps与componentDidUpdate四个方法中才能调用this.setState()，且在componentWillMount中调用无意义。
三、组件卸载
组件卸载涉及两个生命周期函数：componentWillUnmount和componentDidMount。
-
componentWillUnmount()： 在组件卸载前调用，一般执行一些清理工作，如：清除定时器（setTimeout,setInterval）、清除时间监听（removeEventListener）、清除手动创建的dom等。
-
componentDidMount()： 组件卸载后执行的一些操作。
网友评论