react——生命周期

我们将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父组件的重新渲染会导致其所有子组件的重新渲染，这个时候其实我们是不需要所有子组件都跟着重新渲染的，因此需要在子组件的该生命周期中做判断

如果只定义方法，不写任何返回值，会提示：CommentApp.shouldComponentUpdate(): Returned undefined instead of a boolean value. Make sure to return true or false.

 //nextProps和nextState是改变之后的props和state

componentWillUpdate (nextProps,nextState)

当接受到新属性或状态时，componentWillUpdate()为在渲染前被立即调用。在更新发生前，使用该方法是一次准备机会。该方法不会在初始化渲染时被调用。不能在这里调用this.setState()

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

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

 

总结：

一、初始化阶段：

getDefaultProps:获取实例的默认属性

getInitialState:获取每个实例的初始化状态

componentWillMount：组件即将被装载、渲染到页面上

render:组件在这里生成虚拟的DOM节点

componentDidMount:组件真正在被装载之后

二、运行中状态：

componentWillReceiveProps:组件将要接收到属性的时候调用

shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回false，接收数据后不更新，阻止render调用，后面的函数不会被继续执行了）

componentWillUpdate:组件即将更新不能修改属性和状态

render:组件重新描绘

componentDidUpdate:组件已经更新

三、销毁阶段：

componentWillUnmount:组件即将销毁

 

----------------------------更新---------------------------------------------

16版本之前的生命周期

第一次渲染

constructor -> componentWillMount -> render -> componentDidMount

props更新

componentWillReceiveProps(newProps) -> shouldComponentUpdate((nextProps, nextState))(如果返回true) -> componentUillUpdate(nextProps, nextState) -> render -> componentDidUpdate(prevProps, prevState)

state更新

shouldComponentUpdate((nextProps, nextState))(如果返回true) -> componentUillUpdate(nextProps, nextState) -> render -> componentDidUpdate(prevProps, prevState)

组件卸载

componentWillUnmount

16版本之后的生命周期

第一次渲染

constructor -> getDerivedStateFromProps(nextProps, prevState) -> render -> componentDidMount

props或者state更新

getDerivedStateFromProps(nextProps, prevState) -> shouldComponentUpdate((nextProps, nextState))(如果返回true) -> render -> getSnapshotBeforeUpdate(prevProps, prevState) ->  componentDidUpdate(prevProps, prevState)

组件卸载

componentWillUnmount

//getDerivedStateFromProps：组件每次被 rerender的时候，包括在组件构建之后(虚拟 dom之后，实际 dom挂载之前)，每次获取新的 props或 state之后；每次接收新的props之后都会返回一个对象作为新的 state，返回null则说明不需要更新 state；配合 componentDidUpdate，可以覆盖 componentWillReceiveProps的所有用法

 

//getSnapshotBeforeUpdate：触发时间: update发生的时候，在 render之后，在组件 dom渲染之前；返回一个值，作为 componentDidUpdate的第三个参数；配合 componentDidUpdate, 可以覆盖 componentWillUpdate的所有用法