React中useEffect与生命周期钩子函数的对应关系说明

 更新时间:2022年09月14日 14:10:45   作者:TumbleweeD_*  
这篇文章主要介绍了React中useEffect与生命周期钩子函数的对应关系说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

React useEffect与生命周期钩子函数的对应关系

在React的函数组件中,useEffect的作用其实也对标了类组件中的生命周期,它的四种使用格式也与生命周期的四种钩子函数形成着对应关系。

使用格式一:不带参数的情况

 执行时机:(1)初始执行 (2)每次页面更新之后都要执行

    useEffect( () => {
    //执行函数
     })

对应关系:componentDidMount + componentDidUpdate

使用格式二:带第二个参数,参数为空数组

 执行时机:只执行第一次(初始执行)

    useEffect( () => {
    //执行函数
     }, [] )

对应关系:componentDidMount

使用场景:事件绑定、发起ajax请求

使用格式三:带第二个参数,并且指定了依赖项

 执行时机:只执行第一次(初始执行)

    useEffect( () => {
    //执行函数
     }, [] )

对应关系:componentDidMount

使用场景:事件绑定、发起ajax请求

使用格式四:依赖项为空,没有具体的副作用函数.但是有副作用函数的清理函数.

 执行时机:组件销毁时

    useEffect( () => {
      return () => { 清理函数 }
     }, [] )

对应关系:componentWillUnMount

使用场景:组件销毁时,清除遗留的事件绑定和定时器.

React函数式组件用useEffect模拟三个生命周期钩子函数

首先我们知道在React中的函数式组件是没有生命周期的,那我们想在函数式组件中实现class组件中生命周期钩子函数的效果应该怎么操作呢?

这里就得用到一个hooks来模拟钩子函数,这个hooks就是useEffect,这个useEffect可以模拟三个钩子函数,分别是componentDidMount,componentWillUnmount和componentDidUpdate。

先贴代码为敬

React.useEffect(() => {
    console.log("这是模拟componentDidMount钩子函数")
    return () => {//return出来的函数本来就是更新前,销毁前执行的函数,现在不监听任何状态,所以只在销毁前执行
        console.log("这是模拟componentWillUnmount钩子函数")
    }
},[])//第二个参数一定是一个空数组,因为如果不写会默认监听所有状态,这样写就不会监听任何状态,只在初始化时执行一次。

通过上面这种写法就可以同时模拟componentDidMount和componentWillUnmount钩子函数。接下来说componentDidUpdate

//在此之前需要使用useRef这个hooks
const flag = React.useRef(null)
React.useEffect(() => {
    if(!flag.current){
        flag.current = true
    } else {
        console.log("更新了")
    }
})

在这里我们没有传第二个参数,也就是说他默认监听所有状态,只要有状态发生改变,他就会执行,但又有一个问题,他初始化的时候也会执行,为了解决这样的问题我们采用了useRef作为标记,初始化的时候flag.current肯定为false,所以我们将它设置成true,所以他就不会初始化执行了。

看到这里我想有一些小伙伴可能有这样的疑问,就是为什么用useRef,定义一个全局变量不香吗?是,如果你这个组件在一个页面只用一次那就没问题,但组件就是为了复用的,试想一下,在同一页面中你使用了两次这样的组件,第一个组件就没问题,但第二个组件就会初始化执行,因为在全局变量中的flag已经被第一个组件修改成了true,而useRef却不会,他是属于组件内部的,不会受到干扰。 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • React中Provider组件详解(使用场景)

    React中Provider组件详解(使用场景)

    这篇文章主要介绍了React中Provider组件使用场景,使用Provider可以解决数据层层传递和每个组件都要传props的问题,本文结合示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • 浅谈react+es6+webpack的基础配置

    浅谈react+es6+webpack的基础配置

    下面小编就为大家带来一篇浅谈react+es6+webpack的基础配置。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • ReactNative列表ListView的用法

    ReactNative列表ListView的用法

    本篇文章主要介绍了ReactNative列表ListView的用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • React组件传children的方案总结

    React组件传children的方案总结

    自定义组件的时候往往需要传 children,由于写法比较多样,我就总结了一下,文中有详细的总结内容和代码示例,具有一定的参考价值,需要的朋友可以参考下
    2023-10-10
  • 详细分析React 表单与事件

    详细分析React 表单与事件

    这篇文章主要介绍了React 表单与事件的相关资料,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • 详解如何使用React Hooks请求数据并渲染

    详解如何使用React Hooks请求数据并渲染

    这篇文章主要介绍了如何使用React Hooks请求数据并渲染,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • React Suspense前后端IO异步操作处理

    React Suspense前后端IO异步操作处理

    这篇文章主要为大家介绍了React Suspense前后端IO异步操作处理示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • React实现全局组件的Toast轻提示效果

    React实现全局组件的Toast轻提示效果

    这篇文章主要介绍了React实现全局组件的Toast轻提示效果,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • ahooks解决React闭包问题方法示例

    ahooks解决React闭包问题方法示例

    这篇文章主要为大家介绍了ahooks解决React闭包问题方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • react+antd动态增删表单方式

    react+antd动态增删表单方式

    这篇文章主要介绍了react+antd动态增删表单方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01

最新评论