React——生命周期

  • Z时代
  • 2024-01-10
  • 分类：综合

react


一、组件初始化(initialization)阶段

  • super(props)，将父组件的props传给给子组件

  • constructor()用来做一些组件的初始化工作，如定义this.state的初始内容

二、组件的挂载(Mounting)阶段

  1. componentWillMount —— 在组件被挂载到页面之前调用，只调用一次

  2. render

  3. componentDidMount —— 在组件已经被挂载到页面后调用，只调用一次

三、组件的更新(update)阶段

  • state更新

  1. shouldComponentUpdate —— 在组件被更新之前调用

    • 需要返回一个布尔值

    • 为true，则继续往下执行更新阶段的生命周期函数

    • 为false，则不执行更新阶段的生命周期函数

  2. componentWillUpdate —— 在 shouldComponentUpdate 返回 true 后执行

  3. render

  4. componentDidUpdate —— 组件更新完成后执行

  • props更新

  1. componentWillReceiveProps

    • 只在子组件中执行，顶级组件不执行

    • 子组件第一次诞生在父组件中，不会执行

    • 子组件之前已经存在于父组件中，则执行

  2. shouldComponentUpdate —— 在组件被更新之前调用

    • 需要返回一个布尔值

    • 为true，则继续往下执行更新阶段的生命周期函数

    • 为false，则不执行更新阶段的生命周期函数

    • 参数一（nextProps）：改变的props

    • 参数二（nextState）：改变得state

    • 当父组件传过来的数据改变，但子组件不用改变时，可以返回false来优化性能。如父组件的input框改变，但只点击button后子组件才会改变，则判断内容是否改变，改变才返回true，否则返回false

  3. componentWillUpdate —— 在 shouldComponentUpdate 返回 true 后执行

  4. render

  5. componentDidUpdate —— 组件更新完成后执行

四、卸载（unmounting）阶段

  • componentWIllUnmount —— 在这个组件被剔除之前调用

以上是 React——生命周期 的全部内容， 来源链接： utcz.com/z/382775.html

回到顶部