react的生命周期

110 阅读1分钟

一.class生命周期

(react 16.4之前)

三个阶段:加载阶段 更新阶段 卸载阶段

加载阶段:

  1. constructor
  2. render
  3. componentDidMount

更新阶段:

  1. componentWillReceiveProps(props)
  2. shouldComponentUpdate(oldProps,newProps)
  3. render
  4. componentDidUpdate

卸载阶段: componentWillUnmount

(react 16.4以后)

三个阶段:加载阶段 更新阶段 卸载阶段

加载阶段:

  1. constructor
  2. 静态方法: getDerivedStateFromProps(nextProps,state)

1.里面没有this

2.return 的值 是改变state 如果你不想改变state 就返回return null
  1. render
  2. componentDidMount

更新阶段:

  1. getDerivedStateFromProps(nextProps, state)
  2. shouldComponentUpdate(oldProps, nextState) return true false 避免子组件重复渲染
  3. render
  4. getSnapshotBeforeUpdate(prevProps, prevState)
  5. componentDidUpdate

卸载阶段

  1. componentWillUnmount

!!!PureComponent:优化子组件渲染,自动判断基础类型数据,引用类型的指针是否改变判断子组件是否渲染