当前位置: 首页 > news >正文

React - useEffect函数的理解和使用

文章目录

    • 一,useEffect描述
    • 二,它的执行时机
    • 三,useEffect分情况使用
      • 1,不写第二个参数 说明监测所有state,其中一个变化就会触发此函数
      • 2,第二个参数如果是`[]`空数组,说明谁也不监测
      • 3,第二个参数如果只传需要监测的state,那只会根据此状态来执行函数
      • 4,useEffect 里面return一个回调函数,相当于组件即将卸载的声明周期
      • 5,注意

一,useEffect描述

我们知道,react 的函数组件里面没有生命周期的,也没有 state,没有 state 可以用 useState 来替代,那么生命周期呢?

useEffectreact v16.8 新引入的特性。我们可以把 useEffect hook 看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三个生命周期的组合。可以让你在函数式组件中执行一些副作用操作;

一般副作用操作有:

  1. 发送ajax请求
  2. 设置订阅 / 启动定时器
  3. 手动更改真实DOM

二,它的执行时机

可以看做这三个生命周期函数的组合,也就是在这三个时候会执行

componentDidMount(组件已经挂载)

componentDidUpdate(组件已经更新)

componentWillUnmount(组件即将卸载)

三,useEffect分情况使用

useEffect()有两个参数:第一个参数是要执行的回调函数,第二个参数是一个依赖项数组数组(根据需求第二个参数可选是否填写),根据数组里的变量是否变化决定是否执行函数;

先看下面简单的案例 ,下面会分情况讨论:

useEffect.js

import React, { useState, useEffect, useRef } from "react";// 类型约定
interface interList {id: number | string; // 类型可能是number也可能是stringtext: string;done: boolean;
}
// 渲染数据
const myList: Array<interList> = [{ id: 0, text: "参观卡夫卡博物馆", done: true },{ id: 1, text: "看木偶戏", done: true },{ id: 2, text: "打卡列侬墙", done: true }
];const UseEffect: React.FC = (props: any) => {let [num, setNum] = useState(100);let [useInfo, SetUserInfo] = useState(myList);// 0,什么都不传 就是监听所有数据的变化useEffect(() => {console.log("我改变了-all");}); // 1,此处相当于 componentDidUpdate生命周期 组件已经更新完成useEffect(() => {console.log("我改变了");}, [num]); // 只监听num的变化,useInfo的变化不会被监听到// 2,此处相当于componentDidMount生命周期 组件已经挂载完成useEffect(() => {console.log("componentDidMount");console.log("可以拿到num的值:", num);}, []);// 3,此处相当于 componentWillUnmount生命周期 组件即将卸载useEffect(() => {// 返回一个回调函数return () => {console.log("组件将要卸载了");};}, []);// 其实传不传空数组或不是空数组,useEffect函数里面的回调都会执行一次,也就是说componentWillUnmount这个生命周期页面进来就会执行// useEffect 这个hoosk也是可以写多个的,尽量不同的处理写在不同useEffect里面// 点击改变用户信息const change = () => {// react 建议不要更改原数组 返回一个数组的拷贝const newList = [...useInfo, { id: 3, text: "优菈", done: false }];SetUserInfo(newList);};// 点击加一const add = () => {setNum(++num);};const lis = useInfo.map((item, index) => {return (<li key={index}>{index}:{item.text}</li>);});return (<><div><h3>userEffect 副作用hooks函数</h3><br /><button onClick={add}>点击加一</button><p>{num}</p><br /><button onClick={change}>改变用户信息</button><ul>{lis}</ul></div></>);
};
export default UseEffect;

效果图:
在这里插入图片描述

上面代码实现的效果很简单,两个按钮分别改变各自数据的状态,状态的改变会触发 useEffect函数的执行,第二个参数的传参影响着此函数的变化,所以下面进行分情况讨论:

1,不写第二个参数 说明监测所有state,其中一个变化就会触发此函数

若不写第二个参数,函数操作每次都会执行 useEffect(method)监测所有state,相当于 componentDidUpdate生命周期 - 组件已经更新完成。

   import {useEffect } from "react";useEffect(() => {console.log("我改变了-all");}); // 监听所有数据的变化

2,第二个参数如果是[]空数组,说明谁也不监测

第二个参数如果是[]空数组,说明谁也不监测,此时useEffect回调函数的作用就相当于
componentDidMount生命周期 - 组件已经挂载完成;

  // 2,此处相当于componentDidMount生命周期 组件已经挂载完成useEffect(() => {console.log("componentDidMount");console.log("可以拿到num的值:", num);}, []);

3,第二个参数如果只传需要监测的state,那只会根据此状态来执行函数

如果第二个参数中的数组只传了 num ,说明只有 num改变时,才会触发此useEffect回调函数,相当于对此数据的监听。

  // 1,此处相当于 componentDidUpdate生命周期 组件已经更新完成useEffect(() => {console.log("num改变了");}, [num]); // 只监听num的变化

当然数组里面也可以写多个([num,userInfo]),同时监听多个数据的变化。

4,useEffect 里面return一个回调函数,相当于组件即将卸载的声明周期

这句话什么意思呢?
通常,组件是有卸载的生命周期的,使用useEffect 函数只需在里面return一个回调函数,这个回调函数就相当于componentWillUnmount 声明周期,可以在里面清除创建的订阅或计时器 ID 等资源。

  // 3,此处相当于 componentWillUnmount生命周期 组件即将卸载useEffect(() => {// 返回一个回调函数return () => {console.log("组件将要卸载了");};}, []);

这里传了空数组说明我不想监听数据的变化,只想在卸载组件的时候执行该逻辑;

5,注意

其实第二个传不传空数组或不是空数组,useEffect函数里面的回调都会执行一次,也就是说页面进来就会自动执行componentWillUnmount这个生命周期;

useEffect函数 这个hoosk也是可以写多个的,尽量不同的业务处理写在不同useEffect里面;

相关文章:

React - useEffect函数的理解和使用

文章目录 一&#xff0c;useEffect描述二&#xff0c;它的执行时机三&#xff0c;useEffect分情况使用1&#xff0c;不写第二个参数 说明监测所有state&#xff0c;其中一个变化就会触发此函数2&#xff0c;第二个参数如果是[]空数组&#xff0c;说明谁也不监测3&#xff0c;第…...

python模块 — 加解密模块rsa,cryptography

一、密码学 1、密码学介绍 密码学&#xff08;Cryptography&#xff09;是研究信息的保密性、完整性和验证性的科学和实践。它涉及到加密算法、解密算法、密钥管理、数字签名、身份验证等内容。 密码学中的主要概念包括&#xff1a; 1. 加密算法&#xff1a;加密算法用于将…...

【C++】速识模板(template<class T>)

一、引言 在我们学习C时&#xff0c;常会用到函数重载。而函数重载&#xff0c;通常会需要我们编写较为重复的代码&#xff0c;这就显得臃肿&#xff0c;且效率低下。 重载的函数仅仅只是类型不同&#xff0c;代码的复用率比较低&#xff0c;只要有新类型出现时&#xff0c;就…...

腾讯云10万日活服务器配置怎么选?费用多少?

日活10万的小程序或APP使用腾讯云服务器配置怎么选&#xff1f;腾讯云10万人服务器配置多少钱一年&#xff1f;可以选择腾讯云4核8G12M轻量应用服务器或8核16G18M服务器&#xff0c;云服务器CVM的话可以选择标准型S5实例&#xff0c;腾讯云服务器网来详细说下腾讯云日活10万服务…...

vue 使用vue-video-player加载视频(铺满容器)

vue 使用vue-video-player加载视频(铺满容器) 安装 npm install vue-video-player --savemain.js 引入 import VideoPlayer from "vue-video-player" import "video.js/dist/video-js.css" import "vue-video-player/src/custom-theme.css" i…...

OpenCV(三)——图像分割(三)

目录 6.区域生长算法 6.1 区域生长概要 6.2 区域生长原理 7.分水岭算法 7.1 分水岭算法概要...

数论复习c++

改造序列 题目描述 给定长度为 n n n的序列 a 1 , a 2 , . . . , a n a_1,a_2,...,a_n a1​,a2​,...,an​&#xff0c;你可以从中删除一些数&#xff0c;使得删完以后的序列中&#xff0c;所有相邻元素之和均为偶数。请问最少需要删除多少个数&#xff1f; 输入格式 第一行…...

Java try-with-resources 显性 与 隐性 关闭 资源

try-with-resources 是 Java 7 引入的一个语言特性&#xff0c;用于简化资源管理的代码&#xff0c;特别是在处理需要关闭的资源&#xff08;如文件、网络连接、数据库连接等&#xff09;时。try-with-resources 允许您在 try 语句中声明需要关闭的资源&#xff0c;这些资源会在…...

Vue在页面输出JSON对象,测试接口可复制使用

效果图&#xff1a; 数据处理前&#xff1a; 数据处理后&#xff1a; 代码实现&#xff1a; HTML: <el-table height"600" :data"tableData" border style"width: 100%" tooltip-effect"dark" size"mini"><el-…...

【STM32】FreeRTOS开启后,不再进入主函数的while(1)

开启freertos后&#xff0c;想在主函数的while(1)中实现led的翻转&#xff0c;发现无法实现。 int main(void) {/* USER CODE BEGIN 1 *//* USER CODE END 1 *//* MCU Configuration--------------------------------------------------------*//* Reset of all peripherals, …...

Python+Selenium+Unittest 之selenium11--WebDriver操作方法1-常用操作

目录 1、send_keys("输入的内容") &#xff08;输入文字&#xff09; 2、clear() (清除元素内的内容) 3、click()&#xff08;点击元素&#xff09; 4、quit()关闭浏览器 5、refresh()&#xff08;刷新浏览器页面&#xff09; 6、set_window_size()和用 maxim…...

气液固三相线识别—Langmuir部分复现

关注 M r . m a t e r i a l , \color{Violet} \rm Mr.material\ , Mr.material...

Redis——常见数据结构与单线程模型

Redis中的数据结构 Redis中所有的数据都是基于key&#xff0c;value实现的&#xff0c;这里的数据结构指的是value有不同的类型。 当前版本Redis支持10种数据类型&#xff0c;下面介绍常用的五种数据类型 底层编码 Redis在实现上述数据结构时&#xff0c;会在源码有特定的…...

大数据-玩转数据-Flink-Transform

一、Transform 转换算子可以把一个或多个DataStream转成一个新的DataStream.程序可以把多个复杂的转换组合成复杂的数据流拓扑. 二、基本转换算子 2.1、map&#xff08;映射&#xff09; 将数据流中的数据进行转换, 形成新的数据流&#xff0c;消费一个元素并产出一个元素…...

Java泛型集合简明教程

前言 我们编写一个数组并对数组进行排序&#xff0c;不管是对浮点型数组、整型数组、字符串数组或者是其他任何类型的数组进行排序&#xff0c;我们可以利用方法重载的方式&#xff0c;针对每种类型的数组分别编写一个排序方法&#xff0c;需要为几种类型的数组排序&#xff0…...

Prometheus-RabbitMQ Exporter

文章目录 一、介绍监控插件两个插件的区别一、 官方插件 rabbitmq_prometheus1 配置 RabbitMQ 集群名称2 授权使用插件2.1 配置文件方式2.2 命令行方式3 监听地址和端口4 RabbitMQ 插件获取指标的频率5 配置到 Prometheus6 关于聚合指标和每个对象指标6.1 获取聚合指标 `/metri…...

flink读取kafka数据存储iceberg

1、说明 使用flink实时的读取kafka的数据&#xff0c;并且实时的存储到iceberg中。好处是可以一边存数据&#xff0c;一边查询数据。当然使用clickhouse也可以实现数据的既存既取。而hive数据既存既读则会有问题。iceberg中数据读写数据都是从快照中开始的&#xff0c;读和写对…...

文章二:分支管理策略 - 分支玩转:Git分支管理实战

开始本篇文章之前先推荐一个好用的学习工具&#xff0c;AIRIght&#xff0c;借助于AI助手工具&#xff0c;学习事半功倍。欢迎访问&#xff1a;http://airight.fun 概述 在软件开发中&#xff0c;版本控制是一项至关重要的工作。Git作为目前最受欢迎的分布式版本控制系统&…...

JS dom元素和鼠标位置之间的一系列属性快速参考

clientHeight 获取对象的高度&#xff0c;不计算任何边距、边框、滚动条&#xff0c;但包括该对象的补白。 clientLeft 获取 offsetLeft 属性和客户区域的实际左边之间的距离。 clientTop 获取 offsetTop 属性和客户区域的实际顶端之间的距离。 clie…...

【剑指 Offer 39】数组中超过一半的数字

题目&#xff1a; 数组中有一个数字出现的次数超过数组长度的一半&#xff0c;请找出这个数字。 你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。 示例&#xff1a; 输入: [1, 2, 3, 2, 2, 2, 5, 4, 2] 输出: 2 思考&#xff1a; 方法一&#xff1a;投…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...