React生命周期
一、装载(初始化)过程(Mount)
组件第一次在DOM树渲染的过程
1)getDefaultProps() :
ES5中设置默认的props(ES6中defaultProps设置组件的默认的属性)。
2)getInitialState() :
ES5中初始化state,此时可以访问this.props。
3)componentWillMount() :
在组件被挂载前调用,整个生命周期只执行一次。
4)render():
渲染组件,创建虚拟DOM,更新DOM树(不能更改state了),必须实现该方法。
5)componentDidMount():
在组件渲染之后调用,已经生成真实的DOM节点,只执行一次。
二、更新过程(Update)
组件被重新渲染的过程(初始化时均不调用)
1)componentWillReceiveProps(nextProps):
父组件的render()方法执行后就会调用。
2)shouldComponentUpdate(nextProps, nextState):
当state或者props改变时调用,返回boolean。若返回true,则继续执行render();若返回false则放弃本次渲染(对于react性能优化非常重要)。
3)componentWillUpdata(nextProps, nextState):
只有在组件将要更新时才调用,此时可以修改state。
4)render():
渲染组件
5)componentDidUpdate():
组件更新完成后调用,此时可以获取dom节点。
三、卸载过程(Unmount)
组件从DOM树中删除的过程
1)componentWillUnmount():
组件将要卸载时调用,将组件从DOM树移出,防止内存溢出(如:事件监听、定时器)。