RN-生命周期函数(新)

旧版生命周期函数

10759997-b398cc11c434a3f0.jpg

react 16.4 以后生命周期函数

http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

image.png

挂载

当组件实例被创建并插入 DOM 中时,其生命周期调用顺序如下:
  • constructor(props)
  • static getDerivedStateFromProps(props, state) 会在调用 render 方法之前调用,并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state,如果返回 null 则不更新任何内容。
  • render()
    -componentDidMount()

注意⚠️:
下述生命周期方法即将过时,在新代码中应该避免使用它们
UNSAFE_componentWillMount()

更新

当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下:
  • static getDerivedStateFromProps(props, state)
  • shouldComponentUpdate(nextProps, nextState)
  • render()
  • getSnapshotBeforeUpdate(prevProps, prevState)
    应返回 snapshot 的值(或 null)。
  • componentDidUpdate(prevProps, prevState, snapshot)

注意⚠️:
下述方法即将过时,在新代码中应该避免使用它们
UNSAFE_componentWillUpdate()
UNSAFE_componentWillReceiveProps()