一张图了解React组件的生命周期（二）

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

react

组件生命周期函数的定义：

生命周期函数指在某一个时刻组件会自动调用执行的函数。

从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，那么这些事件，统称为组件的生命周期函数！

组件生命周期函数总览

组件的生命周期包含三个阶段：创建阶段（Mounting）、运行和交互阶段（Updating）、卸载阶段（Unmounting）

挂载阶段Mounting：

挂载：组件第一次渲染到页面上的时候
1、componentWillMount：

初始化组件，在组件即将挂载到页面的时刻自动执行，render方法之前执行，官方不建议做数据请求
2、componentDidMount：

组件在挂载到页面之后执行，render方法之后执行，可以处理数据请求和 this.setState

更新阶段（运行阶段）Updating

在组件更新的过程中运行的函数（数据发生了变化 props 或者 state ）

1、componentWillReceiveProps(nextProps)

此函数执行需要满足以下两个条件：

条件1：当一个组件要从父组件接受参数；

条件2：只要父组件的render函数重新执行了，子组件的这个函数就会被执行了【解释下：如果这个组件第一次存在于父组件中（第一次显示到页面上），不会执行；如果这个组件之前已经存在于父组件中（显示在页面上了），才会执行】

2、shouldComponentUpdate(nextProps,nextState)

组件被更新之前自动执行，要求返回boolean类型的结果。

子组件的props和state变更时调用，可以在子组件的render函数执行前获取新的props和state，如果返回false可以阻止子组件render渲染，可以通过该方法进行一些优化。如下：

shouldComponentUpdate(nextProps,nextState){
   if(nextState.Number == this.state.Number){
      return false
    }
}

3、componentWillUpdate

在组件接收到了新的props或者state 即将进行重新渲染前，该方法会被调用，在shouldComponentUpdate函数之后执行（shouldComponentUpdate返回false时不执行）注意不要在此方面里再去更新props或者state

4、componentDidUpdate

在组件重新被渲染之后，它会被调用。可以在这里访问并修改DOM。可以做一些第三方插件的渲染，g2,echart等图标的重新渲染

以上是 一张图了解React组件的生命周期（二） 的全部内容， 来源链接： utcz.com/z/382819.html

回到顶部