写react也快半年了,讲一下自己对于生命周期的理解及各个生命周期的作用
首先,看一下一个组件的构造
1、constructor
constructor参数接受两个参数props,context
可以获取到父组件传下来的的props,context,如果你想在constructor构造函数内部(注意是内部哦,在组件其他地方是可以直接接收的)使用props或context,则需要传入,并传入super对象。
constructor(props,context) {
super(props,context)
console.log(this.props,this.context) // 在内部可以使用props和context
}
2、componentWillMount 组件将要挂载
1、组件刚经历constructor,初始完数据
2、组件还未进入render,组件还未渲染完成,dom还未渲染
3、componentDidMount 组件渲染完成
组件第一次渲染完成,此时dom节点已经生成,可以在这里调用ajax请求,返回数据setState后组件会重新渲染
4.componentWillReceiveProps (nextProps)
componentWillReceiveProps在接受父组件改变后的props需要重新渲染组件时用到的比较多
它接受一个参数
5.shouldComponentUpdate(nextProps,nextState)
唯一用于控制组件重新渲染的生命周期,由于在react中,setState以后,state发生变化,组件会进入重新渲染的流程,(暂时这么理解,其实setState以后有些情况并不会重新渲染,比如数组引用不变)在这里return false可以阻止组件的更新
6.componentWillUpdate (nextProps,nextState)
houldComponentUpdate返回true以后,组件进入重新渲染的流程,进入componentWillUpdate,这里同样可以拿到nextProps和nextState
7.componentDidUpdate(prevProps,prevState)
组件更新完毕后,react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期,这里可以拿到prevProps和prevState,即更新前的props和state。
如果你理解了组件一次重新渲染的过程,那么你应该理解下面5处打印出来的state应该是相同的。(关于setState异步是同步的理解,后面也会整理一篇文章~)
如果你理解了组件一次重新渲染的过程,那么你应该理解下面5处打印出来的state应该是相同的。(关于setState异步是同步的理解,后面也会整理一篇文章~)