React生命周期流程

发表于
React生命周期流程

一、组件初始化

  1. constructor() // 初始化state
  2. UNSAFE_componentWillMount()
  3. render()
  4. componentDidMount()

如果存在getDerivedStateFromProps和getSnapshotBeforeUpdate，UNSAFE_componentWillMount()、UNSAFE_componentWillReceiveProps、UNSAFE_componentWillUpdate(nextProps, nextState)将不会执行

  1. constructor()
  2. static getDerivedStateFromProps(nextProps, prevState)
  3. render()
  4. componentDidMount()

二、state发生改变时

  1. shouldComponentUpdate(nextProps, nextState)
  2. UNSAFE_componentWillUpdate(nextProps, nextState)
  3. render()
  4. componentDidUpdate(prevProps, prevState)

如果存在getDerivedStateFromProps和getSnapshotBeforeUpdate，UNSAFE_componentWillMount()、UNSAFE_componentWillReceiveProps、UNSAFE_componentWillUpdate(nextProps, nextState)将不会执行

  1. static getDerivedStateFromProps(nextProps, prevState)
  2. shouldComponentUpdate(nextProps, nextState)
  3. render()
  4. getSnapshotBeforeUpdate(prevProps, prevState)
  5. componentDidUpdate(prevProps, prevState, snapshot)

三、props发生改变时

  1. UNSAFE_componentWillReceiveProps(nextProps)
  2. shouldComponentUpdate(nextProps, nextState)
  3. UNSAFE_componentWillUpdate(nextProps, nextState)
  4. render()
  5. componentDidUpdate(prevProps, prevState)

如果存在getDerivedStateFromProps和getSnapshotBeforeUpdate，UNSAFE_componentWillMount()、UNSAFE_componentWillReceiveProps、UNSAFE_componentWillUpdate(nextProps, nextState)将不会执行

  1. static getDerivedStateFromProps(nextProps, prevState)
  2. shouldComponentUpdate(nextProps, nextState)
  3. render()
  4. getSnapshotBeforeUpdate(prevProps, prevState)
  5. componentDidUpdate(prevProps, prevState, snapshot)

组件卸载时

  1. componentWillUnmount()