react——生命周期

Posted 2021-03-16 pcxhahaha

我们将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