每个组件的生命周期都可能会经历如下三个过程:
-
装载过程(Mount),也就是组件第一次在DOM树中渲染的过程
-
更新过程(Update),也就是组件被重新渲染的过程
-
卸载过程(Unmount),组件从DOM中删除的过程。
-
当首次挂载组件时,按顺序执行
getDefaultProps
,getInitialState
,componentWillMount
,render
,componentDidMount
. -
当重新挂载组件时,此时按顺序执行
getInitialState
,componentWillMount
,render
,componentDidMount
, 并不执行getDefaultProps
. -
当卸载组件时,执行
componentWillUnmount
-
当再次渲染组件时,组件接受到更新状态,此时按顺序执行
componentWillReceiveProps(nextProps)
,shouldComponentUpdate(nextProps,nextState)
,componentWillUpdate(nextProps, nextState)
,render
,componentDidUpdate(prevProps, prevState)
.
getDefaultProps,getInitialState只有在使用React.createClass方法创建组件时才会用到,我们在使用ES6语法创建时其实并不会用到。
ES6 周期顺序表
第一次渲染 | 第二次渲染 | props 改变 | state 改变 | 卸载 |
---|---|---|---|---|
componentWillMount | componentWillMount | componentWillReceiveProps | shouldComponentUpdate | componentWillUnmount |
render | render | shouldComponentUpdate | componentWillUpdate | |
componentDidMount | componentDidMount | componentWillUpdate | render | |
render | ||||
componentDidUpdate |
ending ...
[//]: # (谢谢* 掘金-sturuby)