当前位置：首页 > article >正文

React 第八节组件生命周期钩子-类式组件，函数式组件模拟生命周期用法

article 2024/11/27 9:59:46

概述

React组件的生命周期可以分为三个主要阶段：
挂载阶段（Mounting）：组件被创建，插入到DOM 树的过程；
更新阶段（Updating）：是组件中 props 以及state 发生变化时，重新render渲染视图过程；
卸载阶段（Unmounting）：是DOM被从虚拟DOM树移除的过程；
每个阶段都伴随着一系列的生命周期方法，这些方法为开发者提供了在类式组件不同阶段执行操作不同代码的机会，使开发人员能够更好的处理业务交互。

1、类式组件中的生命周期

React 16.3 之前的钩子
请添加图片描述

React 16.3 之后的生命周期钩子
请添加图片描述

2、React 16.3 版本之前的生命周期

这个版本的 React 有非常明确的生命周期，能够清晰的知道各个阶段的钩子函数，跟VUE2.0的非常相似，
主要钩子函数有如下：

2.1、挂载阶段：

constructor(props)

类的构造方法，在组件中被创建时候调用，用于初始化 state 和绑定事件处理函数，但是这个时候不能调用 this.setState()，因为此时组件还没有挂载到 DOM上；

componentWillMount()

将要插入回调，DOM结构生成前要执行的操作

render()

用于插入虚拟DOM 回调，将虚拟DOM 渲染到视图上的过程

componentDidMount()

虚拟 DOM插入回调已经完成，即视图已经渲染完成，页面真实DOM已经加载完，此阶段可以进行数据请求、订阅或手动更改DOM

2.2、更新阶段：

每次在进行 this.setState() 操作，或者子组件得到的 props 更新时候，都会执行此阶段的钩子函数，还有就是执行 forceUpdate() 时候 同样也会执行此阶段函数；

componentsWillUpdate()

视图将要更新前的回调操作；用于数据格式化等操作

render()

根据传入的新state 或者新 props 进行重新渲染视图

componentDidUpdate()

视图重新更新渲染已经完成，可以在这里执行依赖于DOM的操作，如重新获取DOM尺寸或执行网络请求

2.3、卸载阶段

componentWillUnmount()

组件被移除回调，这个阶段可以处理一些定时任务，事件卸载、取消网络请求等操作

3、React 16.3 版本之后的生命周期

3.1、挂载阶段：

constructors(props)

类的构造方法，在组件被创建时调用。用于初始化state和绑定事件处理函数,创建 ref。注意，constructor中不能调用this.setState()，因为此时组件还未挂载到DOM上。

constructor(props) {
      console.log('==constructor==')
      // 获取上级传入 props
      super(props)
      // 声明 state 属性  count
      this.state = {
         count: 0
      }
   }

static getDerivedStateFromProps(props, state)

React 16.3引入的静态方法，在组件创建时和每次更新前调用。用于根据props更新state。如果不希望更新state，则返回null。
如：

   static getDerivedStateFromProps(props, state) {
        // 根据props更新state
        console.log('==props=')
        console.log('==state=', state)
         //   表示给 count 设置初始值最终会渲染为 99
        return {count: 99}
    }

static 静态方法中是获取不到当前组件的实例的，不能进行 this.XX 操作调用如：this.fetch()

render()

渲染方法，根据组件的props和state返回React元素。render方法必须是一个纯函数，不能修改组件的状态或执行副作用。

componentDidMount()

组件挂载到DOM后调用。是执行副作用（如数据获取、订阅或手动更改DOM）。

3.2、更新阶段

在组件的props或state发生变化时，React会重新渲染组件

static getDerivedStateFromProps(props, state)

同挂载阶段，用于在更新前根据props更新state。同上返回 null 时候，不会更是视图；

shouldComponentUpdate(nextProps, nextState)

返回一个布尔值，决定组件是否应该更新。默认情况下返回true，但可以通过此方法优化性能，避免不必要的渲染，通过对比新旧数据判断是否需要执行更新视图操作。

render()

同挂载阶段，根据更新后的props和state重新渲染组件。

getSnapshotBeforeUpdate(prevProps, prevState)

在最近一次渲染输出（提交到DOM）之前调用，可以捕获一些信息（如滚动位置），这些信息将作为参数传递给componentDidUpdate。

componentDidUpdate(prevProps, prevState, snapshot)

组件更新后被调用。可以在这里执行依赖于DOM的操作，如重新获取DOM尺寸或执行网络请求

3.3 卸载阶段

componentWillUnmount()

在组件卸载及销毁之前调用。是执行清理操作（如取消网络请求、清除定时器）的理想位置。

类式组件生命周期钩子函数变化：

请添加图片描述

4、在函数式组件中如何模拟生命周期

生命周期主要分为三个阶段，在函数式组件中是无法模拟出上面类式组件的各个生命钩子函数的，但是可以通过 useEffect() Hook模拟组件的 挂载、更新、销毁三个阶段；

4.1 模拟挂载阶段

与类组件中的 componentDidMount() 钩子函数相似

useEffect(() => {
   // 这里执行挂载时候操作
   console.log('===componentDidMount==')
   
}, []) // 第二参数为空 数组时候，表示 挂载、卸载时候执行；

4.2 模拟更新阶段

与类式组件中的 shouldComponentUpdate 类似

 useEffect(() => {
   // 这里执行挂载时候操作
   console.log('===componentDidMount==')
   console.log('===我更新了==')
   
}, [count]) // 第二参数为空 数组时候，表示 挂载、卸载时候执行;若第二个参数 传入了依赖属性，则该属性变化时候，会执行第一个参数的回调函数

4.3 模拟卸载阶段

与类式组件中的 componentWillUnmount() 类似


useEffect(() => {
        // 这里执行挂载时候操作
   console.log('===componentDidMount==', count)
   return () => {
      // 这里执行卸载后的操作
      console.log('=组件卸载了==')
   }
   
}, [count]) // 第二参数为空 数组时候，表示 挂载、卸载时候执行,