一、生命周期函数的定义
在某个时刻自动被调用的函数是生命周期函数
二、React中生命周期函数示意图
lifeFuncs.png
为了记忆方便，我把
componentWillXXX-render-componentDidXXX的过程简单地称为Will-render-Did那么上面的图示就可以简化成：
生命周期.png
三、生命周期函数的调用时期
-
Initialization
执行Constructor，初始state和props -
Mounting
Will：先执行，判断组件是否挂载
render：渲染组件
Did：组件渲染完成后执行 -
Updation
ComponentWillReceiveProps：如果组件不是第一次存在页面且父组件render执行时，才执行
ComponentShouldUpdate：判断组件是否需要更新，如果返回true，表示需要更新；如果返回false，则表示不需要更新
Will：更新组件前执行
render：state发生变化，或者父组件的render（props发生变化）执行时执行
Did：组件更新完成后执行 -
UnMounting
Will：组件移除之前执行
注意：1. 如果移除组件，那么Updation中的生命周期函数不会被执行
2. render不能省略，因为render不存在Component中，不能继承而来，需要自定义
四、生命周期函数的使用场景
-
避免子组件不必要的更新
我们知道如果父组件的render执行，子组件的render会被执行，重新渲染子组件。但是，父组件render的执行不一定是该子组件绑定的数据改变造成的，这就造成了子组件不必要的更新。
解决方法：// 在子组件中 ComponentRecevieProps(nextProps, nextState){ // content是props中的一个属性 return nextProps.content !== this.props.content } -
发送ajax请求
ajax请求最好放在ComponentDidMount中componentDidMount(){ // 这里使用了axios模块 axios.get('/api/todolist') .then(() => {alert('success')}) .catch(() => {alert('error')}) }
