react中的useEffect()的使用

useEffect()是react中的hook函数,作用是用于创建由渲染本身引起的操作,而不是事件的触发,比如Ajax请求,DOM的更改

首先useEffect()是个函数,接受两个参数,第一个参数是一个方法,第二个参数是数组 称为依赖项数组,可以没有。第二个参数的不同会影响第一个参数方法的使用

依赖项数组不同的区别

另外还有一种情况就是清除useEffect()的副作用,直接在第一个参数函数里面写一个return一个函数,就会在组件卸载的时候自动清理

import { useEffect, useState } from "react"function Son(){// 开启一个定时器useEffect(()=>{const timer=  setInterval(()=>{console.log("定时器");},1000)return ()=>{clearInterval(timer)}},[])return (<><div>这是 son组件</div></>)
}function App(){// 1.没有依赖项的时候 初始会触发 组件更新会触发const [count,setCount] = useState(0)// useEffect(()=>{//     console.log("副作用函数执行与否");// })// 2.当依赖项为空数组的时候 只会在初始时触发 //   useEffect(()=>{//     console.log("副作用函数执行 []");// },[])// 3.传入特定的依赖项  初始时触发 依赖项变化时触发useEffect(()=>{console.log("副作用函数执行 []");},[count])// 4.清除useEffect的副作用 通过在第一个参数函数中return一个函数 清除副作用// 最常用的常见就是在组件卸载时自动执行const [show,setShow] = useState(true)return (<><div>useEffect的使用 根据依赖项的不同</div><button onClick={()=>setCount(count+1)}>{count}</button><div>{show&&<Son/>}<button onClick={()=>setShow(false)}>卸载son组件</button></div></>)
}export default App

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/13736.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构--树与二叉树--编程求以孩子兄弟表示法存储的森林的叶结点个数

数据结构–树与二叉树–编程求以孩子兄弟表示法存储的森林的叶结点个数 题目 编程求以孩子兄弟表示法存储的森林的叶结点个数 ps&#xff1a;题目来源2025王道数据结构 思路 树上的操作大多数是通过递归进行的 我们可以从根节点开始递归 如果结点 N 没有孩子指针&#xff…

【Entity Framework】如何理解EF中的级联删除

【Entity Framework】如何理解EF中的级联删除 文章目录 【Entity Framework】如何理解EF中的级联删除一、概述二、发生级联行为时2.1/删除主体/父实体2.2/断开关系 三、发生级联行为的位置3.1/级联删除被跟踪实体3.2/数据库中的级联删除 四、级联NULL 一、概述 Entity Framewo…

vue3 路由跳转 携带参数

实现功能&#xff1a;页面A 跳转到 页面B&#xff0c;携带参数 路由router.ts import { createRouter, createWebHistory } from "vue-router";const routes: RouteRecordRaw[] [{path: "/demo/a",name: "aa",component: () > import(&quo…

x264 码率控制原理:x264_ratecontrol_start 函数

x264_ratecontrol_start 函数 函数原理 函数功能:编码一帧之前,为当前帧选择一个量化 QP,属于帧级别码率控制;这对于控制视频质量和文件大小至关重要。通过调整QP,编码器可以在保持视频质量的同时,尽可能减小输出文件的大小。函数参数:x264_t *h: 编码器上下文结构体指…

十七、个人信息出境标准合同的具体内容有哪些?

根据《标准合同办法》第六条&#xff0c;标准合同应当严格按照网信办制定版本订立&#xff0c;个人信息处理者可以与境外接收方约定其他条款&#xff0c;但不得与标准合同相冲突。 根据《标准合同办法》附件&#xff0c;目前版本的标准合同内容主要包括&#xff1a; 1. 个人信…

Flutter 中的 TextButton 小部件:全面指南

Flutter 中的 TextButton 小部件&#xff1a;全面指南 在Flutter的世界里&#xff0c;TextButton是一个基础的小部件&#xff0c;用于创建只包含文本的按钮。它通常用于对话框、表单以及需要强调主要操作的界面。本文将为您提供一个全面的指南&#xff0c;帮助您了解如何使用T…

地信遥感测绘电子书

《地理信息系统概论》&#xff0c;黄杏元&#xff0c;马劲松编著&#xff0c;第三版&#xff0c;高等教育出版社&#xff0c;2008年 《地理信息系统》&#xff08;第二版&#xff09;汤国安&#xff0c;赵牡丹&#xff0c;杨昕等编&#xff0c;高等教育出版社&#xff0c;2010…

【stm32/CubeMX、HAL库】嵌入式实验五:定时器(2)|PWM输出

参考&#xff1a; 【【正点原子】手把手教你学STM32CubeIDE开发】 https://www.bilibili.com/video/BV1Wp42127Cx/?p13&share_sourcecopy_web&vd_source9332b8fc5ea8d349a54c3989f6189fd3 《嵌入式系统基础与实践》刘黎明等编著&#xff0c;第九章定时器&#xff0c…

8操作系统定义、分类及功能+设备管理+作业管理 软设刷题 软考+

操作系统定义、分类及功能设备管理作业管理 知识点1-55-1010-1515-2020-2525-3030-35 刷题操作系统定义、分类及功能1-55-1010-15作业管理1-5设备管理1-55-10 知识点 1-5 1 嵌入式操作系统的特点&#xff1a; 1.微型化&#xff0c;从性能和成本角度考虑&#xff0c;希望占用的…

145.栈和队列:删除字符串中的所有相邻重复项(力扣)

题目描述 代码解决 class Solution { public:string removeDuplicates(string s) {// 定义一个栈来存储字符stack<char> st;// 遍历字符串中的每一个字符for(int i 0; i < s.size(); i){// 如果栈为空或栈顶字符与当前字符不相同&#xff0c;则将当前字符入栈if(st.e…

Jenkins的Pipeline流水线

目录 前言 流水线概念 什么是流水线 Jenkins流水线 pipeline node stage step 创建一个简单的流水线 创建Pipeline项目 选择模板 测试 前言 提到 CI 工具&#xff0c;首先想到的就是“CI 界”的大佬——Jenkjns,虽然在云原生爆发的年代,蹦出来了很多云原生的 CI 工具…

Hive的窗口函数

定义&#xff1a; 聚合函数是针对定义的行集(组)执行聚集,每组只返回一个值.如sum()、avg()、max() 窗口函数也是针对定义的行集(组)执行聚集,可为每组返回多个值.如既要显示聚集前的数据,又要显示聚集后的数据.步骤&#xff1a; 1.将记录分割成多个分区. 2.在各个分区上调用窗…

word-表格疑难杂症诊治

一、用表格进行排版图片、制作公文头 可以在插入图片时固定列宽 二、表格中的疑难杂症 问题一&#xff1a;表格超过页面&#xff0c;右侧文字看不见 解决&#xff1a;表格窗口-布局-自动调整-根据窗口自动调整表格 问题二&#xff1a;表格底部文字被遮挡 解决&#xff1a;布…

ArcGIS Maps SDK for JS:使用queryFeatures方法查询 FeatureLayer 中符合条件的要素

文章目录 方式一&#xff1a;使用featureLayer.createQuery()方法方式二&#xff1a;使用 Query 构造函数方式三&#xff1a;简化写法 要想查询FeatureLayer 图层中满足某些条件的要素&#xff0c;可以使用ArcGIS API for JavaScript 提供的queryFeatures() 方法和 Query 对象进…

【linux】yumvim工具理解使用

目录 Linux 软件包管理器 yum 关于 rzsz 注意事项 查看软件包 Linux开发工具 Linux编辑器-vim使用 vim的基本概念 vim的基本操作 vim正常模式命令集 vim末行模式命令集 简单vim配置 配置文件的位置 sudo提权 Linux 软件包管理器 yum 1.yum是什么&#xff1…

攻防世界---web---warmup

1、题目描述 2、查看源码&#xff0c;发现有个source.php 3、访问该文件&#xff0c;得到这一串代码 4、分析代码 5、访问hint.php&#xff0c;提示flag在ffffllllaaaagggg这个文件下 6、构造payload ?filesource.php?/../../../../../../ffffllllaaaagggg

Fitting Parameterized Three-Dimensional Models to Images

摘要 基于模型的识别和运动跟踪依赖于解决投影和模型参数&#xff0c;使其最佳适应匹配的2D图像特征的3D模型的能力。本文将当前的参数求解方法扩展到处理具有任意曲面和任意数量的内部参数&#xff08;表示关节、可变尺寸或表面变形&#xff09;的对象。开发了数值稳定化方法…

懒人网址导航页 search.html SQL注入漏洞复现

0x01 产品简介 懒人网址导航系统是一种智能化的网址导航平台,旨在帮助用户快速找到所需的网址和资源。该系统提供了智能化的网址搜索和推荐功能,能够根据用户的搜索习惯和偏好推荐相关的网址和资源。同时,系统还提供了网址分类、网址收藏和网址分享等功能,方便用户管理和共…

git常见的18条指令

使用git的时候有没有遗忘指令的情况呢&#xff1f;小编替大家整理出来了18条常用的指令&#xff0c;大家赶紧收藏起来吧&#xff01; gti常见的18条指令 序号指令含义1git init初始化一个仓库2git clone [url]克隆一个仓库3git add [file]添加文件到暂存区4git commit -m "…

简易Docker磁盘使用面板Doku

这个项目似乎有 1 年多没更新了&#xff0c;最后发布版本的问题也没人修复&#xff0c;所以看看就行&#xff0c;不建议安装 什么是 Doku &#xff1f; Doku 是一个简单、轻量级的基于 Web 的应用程序&#xff0c;允许您以用户友好的方式监控 Docker 磁盘使用情况。Doku 显示 D…