image.png

三个阶段

  1. Mounting 挂载阶段
    1. constructor
      • 这个是类自带这的
      • 一般放初始化数据
    2. render
      • 初始渲染时会执行
    3. componentDidMount
      • DOM 完成挂载执行
  2. Updating 更新阶段
  • shouldComponentUpdate
    1. render
      • 更新渲染时会执行
    2. componentDidUpdate
      • 更新完成时执行
  1. Unmounting 卸载阶段
    1. componentWillUnmount
      • 组件在卸载前执行时

完整的生命周期

Mount Update Unmount Error
render 阶段 constructor componentWillReceiveProps
getDerivedStateFromProps getDerivedStateFromError
shouldComponentUpdate
componentWillMount componentWillUpdate
render
commit 阶段 getSnapshotBeforeUpdate
componentDidMount componentDidUdpate componentWillUnmount componentDidCatch

红字在 React 17 会被取消，取而代之是用绿字的生命周期钩子。
当红字与绿字的生命周期钩子同时使用，React 会报错。