组件挂载阶段
constructor
constructor
的执行在最前面,这时组件还尚未挂载至页面,所以constructor
中不可直接使用setState
首先是
constructor
的执行,同一个类组件对象只会创建一次,不会因为组件的重新渲染而再次创建,所以constructor
也就只会执行一次
componentWillMount(React16之后被移除)
和该函数的名字一样,她的执行周期就是组件即将被挂载之前,构造函数执行之后
同构造函数一样,只会运行一次
避免使用
setState
static getDerivedStateFromProps(React16之后添加)
- 官方不推荐使用
render
- 调用
React.createElement
创建并返回一个虚拟DOM
,将其挂载至虚拟DOM
树上,并渲染
componentDidMount
组件完成挂载,虚拟
DOM
渲染结束之后,仅执行一次常用于数据获取
组件更新阶段
- 组件挂载彻底完成,接下来就是属性或状态的变化导致的组件更新阶段
componentWillReceiveProps(React16之后被移除)
组件即将接收到新的属性值,即使这个属性值并没有改变
参数为新的属性对象
props
不推荐使用
static getDerivedStateFromProps(React16之后添加)
官方不推荐使用
发生在组件接收了新的属性
props
或状态state
之后,shouldComponentUpdate
之前接收两个参数,
props
,state
,分别为新接收的属性和状态由于是静态函数,所以函数体内的
this
指向构造函数可返回
null
,不改变当前状态,也可返回对象,用该对象覆盖之前的状态
shouldComponentUpdate
发生在组件接收了新的属性
props
或状态state
之后,即使她们并没有改变作用是决定
React
是否要重新渲染该组件若返回
true
,则重新渲染,false
则不重新渲染,默认为true
两个参数,
nextProps
,nextState
,分别对应新接收的属性和状态可用于性能优化
componentWillUpdate(React16之后被移除)
发生于组件即将重新渲染之前
两个参数,
nextProps
,nextState
,分别对应新接收的属性和状态
render
- 开始重新渲染
getSnapshotBeforeUpdate(React16之后添加)
真实
DOM
构建结束,但还未实际渲染至页面前通常用于一些
dom
操作返回值会作为
componentDidUpdate
的第三个参数
componentDidUpdate
发生于组件重新渲染完成之后
两个参数,
prevProps
,prevState
,分别对应属性和状态改变之前的值这个函数里一般会进行一些
dom
的操作,改变元素
componentWillUnMount
发生于组件即将被销毁之前
常用于销毁一些该组件依赖的资源,例如计时器