严格模式

注意，React在开发环境的严格模式下会将以下方法重复调用一次

• class 组件的 constructor 方法
• render 方法
• setState 更新函数 (第一个参数）
• 静态的 getDerivedStateFromProps 生命周期方法

---

挂载卸载

constructor()

constructor(props)中完成了React数据的初始化，显式声明constructor时须调用super(props)。

componentWillMount()

代表的过程是组件已经经历了constructor()初始化数据后，但是还未渲染DOM时。

componentDidMount()

组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，并通过setState重新渲染组件。

componentWillUnmount ()

在此处完成组件的卸载和数据的销毁，并

• clear你在组建中所有的setTimeout,setInterval
• 移除所有组建中的监听 removeEventListener

---

更新

componentWillReceiveProps (nextProps)

监听父组件传入的props改变，通常用于state需要跟随props改变时的情况

componentWillReceiveProps (nextProps) {
   nextProps.openNotice !== this.props.openNotice&&this.setState({
       openNotice:nextProps.openNotice
   }，() => {
     console.log(this.state.openNotice);
 })
}

shouldComponentUpdate(nextProps,nextState)

在这里return false可以阻止组件重新渲染(可用于部分更新/性能优化)
如父组件重新渲染时不需要渲让所有子组件重新渲染，则在子组件的该生命周期中做判断

componentWillUpdate (nextProps,nextState)

shouldComponentUpdate返回true以后进入该回调

render()

在每一次组件更新时，react会通过其diff算法比较更新前后的新旧虚拟DOM树，找到最小的有差异的DOM节点，并重新渲染。

componentDidUpdate(prevProps,prevState)

react只会在第一次初始化成功后会进入componentDidmount，之后每次重新渲染后都会进入这个生命周期。

React新增生命周期

getDerivedStateFromProps(nextProps, prevState)

配合componentDidUpdate以分解componentWillReceiveProps的功能，返回一个对象以改变state。

// before
componentWillReceiveProps(nextProps) {
  if (nextProps.isLogin !== this.props.isLogin) {
    this.setState({ 
      isLogin: nextProps.isLogin,   
    });
  }
  if (nextProps.isLogin) {
    this.handleClose();
  }
}

// after
static getDerivedStateFromProps(nextProps, prevState) {
  if (nextProps.isLogin !== prevState.isLogin) {
    return {
      isLogin: nextProps.isLogin,
    };
  }
  return null;
}

componentDidUpdate(prevProps, prevState) {
  if (!prevState.isLogin && this.props.isLogin) {
    this.handleClose();
  }
}

getSnapshotBeforeUpdate(prevProps, prevState)

代替componentWillUpdate。
在 React 开启异步渲染模式后，在 render 阶段读取到的 DOM 元素状态并不总是和 commit 阶段相同，这就导致在
componentDidUpdate 中使用 componentWillUpdate 中读取到的 DOM 元素状态是不安全的，因为这时的值很有可能已经失效了。
getSnapshotBeforeUpdate 会在最终的 render 之前被调用，也就是说在 getSnapshotBeforeUpdate 中读取到的 DOM 元素状态是可以保证与 componentDidUpdate 中一致的。
此生命周期返回的任何值都将作为参数传递给componentDidUpdate（）。

作者：爱吃芋圆的小w
链接：https://www.jianshu.com/p/b331d0e4b398
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。