React 生命周期
React定义了组件的生命周期会经历如下三个过程:
- 装载过程(Mount),组件第一次在DOM树渲染的过程。
- 更新过程(Update),当组件被重新渲染的过程。
- 卸载过程(Unmount),组件重DOM树中删除的过程。
执行这3个过程的调用函数就是声明周期函数。
装载过程(MOUNT)
该过程会依次调用如下函数:
constructor()
:ES6类的构造函数(为了初始化state
或绑定this
)getInitialState()
:ES5中初始化state
。getDefaultProps()
:ES5中初始化props
。在ES6中使用defaultProps()
方法。componentWillMount()
:在组件被挂载前调用。只执行一次。render()
:渲染组件,必须实现该方法。componentDidMount()
:在组件装载后调用。这时已经生成了真实的DOM节点。只执行一次。
更新过程(update)
当组件的props或者state改变时就会触发组件的更新过程。
更新过程会依次执行如下函数:
- componentWillReceiveProps(nextProps):当父组件的render()方法执行后就会触发该方法。初始化时不调用。
shouldComponentUpdate(nextProps,nextState)
:当props
改变或state
改变时调用,初始化时不掉用,返回boolean
。true
表示继续执行render
方法,fasle
表示放弃本次渲染。render()
:渲染组件。
卸载过程
componentWillUnmount()
:将组件从DOM树移出,防止内存溢出。