react——生命周期

强颜欢笑 提交于 2020-01-13 00:25:25

我们将React.js将组件渲染,并且构造DOM元素然后塞入页面的过程称为组件的挂载。即:初始化组件->挂载到页面上的过程。

constructor() //所有关于组件自身的状态的初始化工作都会放在constructor里面去做,如state。

->componentWillMount() //组件挂载开始之前,也就是在组件调用render方法之前调用。它更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor()初始化数据后,但是还未渲染DOM时。

render()

->componentDidMount()  //构造DOM元素插入页面。组件挂载完成以后,也就是DOM元素已经插入页面后调用。

运行中:

//属性props改变:

componentWillReceiveProps() 

接受一个参数nextProps
通过对比nextProps和this.props,将nextProps的state为当前组件的state,从而重新渲染组件

 

 //状态state改变:

shouldComponentUpdate(nextProps,nextState)

主要用于性能优化(部分更新)
唯一用于控制组件重新渲染的生命周期,由于在react中,setState以后,state发生变化,组件会进入重新渲染的流程,在这里return false可以阻止组件的更新
因为react父组件的重新渲染会导致其所有子组件的重新渲染,这个时候其实我们是不需要所有子组件都跟着重新渲染的,因此需要在子组件的该生命周期中做判断

 

componentWillUpdate (nextProps,nextState)

shouldComponentUpdate返回true以后,组件进入重新渲染的流程,进入componentWillUpdate,这里同样可以拿到nextProps和nextState。

componentDidUpdate(prevProps,prevState)
组件更新完毕后,react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期,这里可以拿到prevProps和prevState,即更新前的props和state。

->componentWillUnmount() //即将从页面中删除。例:{this.state.isShowHeader ? <Header/> : null} state.isShowHeader为false的时候,将Header从页面中删除,即触发此方法。使用场景:清除该组件的定时器和其他数据的清理工作,移除组件中的监听removeEventListener

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!