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

2024-10-03 12:54:01

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 Hooks--useEffect代替常用生命周期函数方式

目录 useEffect代替常用生命周期函数原始生命周期函数对React Hooks(useState和useEffect) 的总结思考一.为什么用React Hooks(面向生命周期编程变成了面向业务逻辑编程) 二.useState理解三.useEffect的理解(原则:让你忘记类组件的生命周期的函数写法) 四.useState和useEffect声明时有先后顺序 useEffect代替常用生命周期函数原始生命周期函数 componentDidMount componentDidUp
React 组件的常用生命周期函数汇总

目录 1. 概述 2. 生命周期的三个阶段 2.1. 创建时(挂载阶段) 2.2. 更新时(更新阶段) 2.3. 卸载时(卸载阶段) 1. 概述意义:组件的生命周期有助于理解组件的运行方式.完成更复杂的组件功能.分析组件错误原因等. 组件的生命周期:组件从被创建到挂载到页面中运行,再到组件不用时卸载的过程. 生命周期的每个阶段总是伴随着一些方法调用,这些方法就是生命周期的钩子函数. 钩子函数的作用:为开发人员在不同阶段操作组件提供了时机. 只有类组件才有生命周期. 2. 生命周期的三个阶段每
React的生命周期函数初始挂载更新移除详解

目录概述 constructor 初始挂载更新移除概述在React中,生命周期函数指的是组件在某一个时刻会自动执行的函数 constructor 在类或组件创建的时候被自动执行,我们可以说它是生命周期函数,但它并不是React所特有的,所有的Es6对象都有这个函数,所以并不能说它是React的生命周期函数初始当数据发生变化时,render函数会被自动执行,符合我们对React生命周期函数的定义,所以它是React的生命周期函数,但在初始阶段,并不会有任何的React生命周期函数被
React中的生命周期详解

目录 react生命周期常用的生命周期不常用的生命周完整的生命周期图 react生命周期函数组件无生命周期,生命周期只有类组件才拥有生命周期函数指在某一时刻组件会自动调用并执行的函数. React每个类组件都包含生命周期方法,以便于在运行过程中特定的阶段执行这些方法. 例如:我们希望在第一次将其呈现到DOM时设置一个计时器Clock.这在React中称为“安装”.我们也想在删除由产生的DOM时清除该计时器Clock.这在React中称为“卸载”. 一般分为:挂载.更新.卸载常用的生
react新版本生命周期钩子函数及用法详解

和旧的生命周期相比准备废弃三个钩子,已经新增了两个钩子 React16 之后有三个生命周期被废弃(但并没有删除) componentWillMount( 组件将要挂载的钩子) componentWillReceiveProps(组件将要接收一个新的参数时的钩子) componentWillUpdate(组件将要更新的钩子) 新版本的生命周期新增的钩子 getDerivedStateFromProps 通过参数可以获取新的属性和状态该函数是静态的该函数的返回值会覆盖掉组件状态 getSnap
浅谈React Component生命周期函数

React组件有哪些生命周期函数?类组件才有的生命周期函数,包括ES6语法的class以及create-react-class模块: 分为几个阶段:挂载,更新,卸载,错误处理: 1,挂载:constructor(常用).static getDerivedStateFromProps.render(常用).componentDidMount(常用) constructor是类组件的构造函数,在这可以初始化组件的state或进行方法绑定如:constructor(props){ super(prop
React中useEffect与生命周期钩子函数的对应关系说明

目录 React useEffect与生命周期钩子函数的对应关系使用格式一:不带参数的情况使用格式二:带第二个参数,参数为空数组使用格式三:带第二个参数,并且指定了依赖项使用格式四:依赖项为空,没有具体的副作用函数.但是有副作用函数的清理函数. React函数式组件用useEffect模拟三个生命周期钩子函数 React useEffect与生命周期钩子函数的对应关系在React的函数组件中,useEffect的作用其实也对标了类组件中的生命周期,它的四种使用格式也与生命周期的四种钩子
Vue3生命周期钩子函数详解

本文实例为大家分享了Vue3生命周期钩子函数的具体代码,供大家参考,具体内容如下一.Vue3生命周期钩子 setup() : 开始创建组件之前,在 beforeCreate 和 created 之前执行,创建的是 data 和 methodonBeforeMount() : 组件挂载到节点上之前执行的函数:onMounted() : 组件挂载完成后执行的函数:onBeforeUpdate(): 组件更新之前执行的函数:onUpdated(): 组件更新完成之后执行的函数:onBeforeUnm
一文搞懂Vue八大生命周期钩子函数

目录一.速识概念: 二.八大生命周期钩子函数: 三.结合代码了解: 1. beforeCreate: 2.created: 3.beforeMount: 4.mounted: 5.beforeUpdate: 6.updated: 7.beforeDestroy: 8.destroyed: 一.速识概念: 我们把一个对象从生成(new)到被销毁(destory)的过程,称为生命周期.而生命周期函数,就是在某个时刻会自动执行的函数. 按照官方的原话,就是每个 Vue 实例在被创建时都要经过一
聊聊vue生命周期钩子函数有哪些,分别什么时候触发

目录 vue生命周期钩子函数以下为详解版生命周期mounted和activated使用.踩坑 activated mounted 踩坑 vue生命周期钩子函数 vue生命周期即为一个组件从出生到死亡的一个完整周期主要包括以下4个阶段:创建,挂载,更新,销毁创建前:beforeCreate, 创建后:created 挂载前:beforeMount, 挂载后:mounted 更新前:beforeUpdate, 更新后:updated 销毁前:beforeDestroy, 销毁后:destro
Angular2生命周期钩子函数的详细介绍

Angular每个组件都存在一个生命周期,从创建,变更到销毁.Angular提供组件生命周期钩子,把这些关键时刻暴露出来,赋予在这些关键结点和组件进行交互的能力,掌握生命周期,可以让我们更好的开发Angular应用概述每个接口都有唯一的一个钩子方法,它们的名字是由接口名再加上ng前缀构成的.比如,OnInit接口的钩子方法叫做ngOnInit, Angular在创建组件后立刻调用它生命周期执行顺序 ngOnChanges 在有输入属性的情况下才会调用,该方法接受当前和上一属性值的Simpl
详解Vue 实例中的生命周期钩子

Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑. Vue 实例在文档中经常会使用 vm 这个变量名表示 Vue 实例,在实例化 Vue 时,需要传入一个选项对象,它可以包含数据(data).模板(template).挂载元素(el).方法(methods).生命周期钩子(lifecyclehook)等选项. Vue 实例化的选项需要注意的
浅谈React Native 中组件的生命周期

概述就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键.RN 组件的生命周期整理如下图: 如图,可以把组件生命周期大致分为三个阶段: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化: 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面: 第
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)

前言说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比较高频的考点,那么该如何回答这类问题,让人有眼前一亮的感觉呢... Vue-Router导航守卫: 有的时候,我们需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录. 为此我们有很多种方法可以植入路由的导航过程:全局的, 单
浅谈对Angular中的生命周期钩子的理解

本文介绍了Angular中的生命周期钩子的理解,分享给大家,希望对大家有所帮助什么是生命周期钩子简单点来说生命周期钩子就是Angular中一个组件从被创建当销毁期间的一些有意义的关键时刻.这些关键时刻在Angular中被Angular核心模块 @angular/core 暴露出来,赋予了我们在它们发生时采取行动的能力. 有哪些生命周期钩子 Angular中从一个组件的创建到销毁一个有八个生命周期钩子它们,按照先后顺序.它们分别是: ngOnChanges() ngOnInit() ngDoC