React之生命周期

React生命周期

Mounting(加载阶段： 4个钩子函数)

• constructor()

加载时调用，初始化 state

• static getDerivedStateFromProps(props, state)

    props 父组件传来的props
    state 本组件的state值
  

  当父组件的render()执行，此函数也会执行，需要return 不然会报错
  每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state

• render()

  最重要的步骤，创建虚拟DOM，进行diff算法，更新DOM树都在此函数进行

• componentDidMount()

  组件渲染完成调用,只调用一次
  在此函数发送ajax/axios请求

Updating（更新阶段：5个钩子函数)

• static getDerivedStateFromProps(props, state)

  当父组件的render()执行，此函数也会执行，需要return 不然会报错
  每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state

• shouldComponentUpdate(nextProps, nextState)

组件接收到新的props或者state时调用
return true就会更新dom（使用diff算法更新）
return false能阻止更新（不调用render）

• render()

  创建虚拟dom，进行diff算法，更新dom树都在此进行

• getSnapshotBeforeUpdate(prevProps, prevState)

  prevProps： 更新之前的props值 prevState：更新之前的state值
  update发生的时候触发;在render之后，在组件dom渲染之前
  返回一个值，作为componentDidUpdate的第三个参数

• componentDidUpdate()

  组件更新完成后调用

  React 组件 生命周期