react,useEffect一直重复执行

2023-10-26

import { useState, useEffect } from 'react'
// useEffect(callback,arr);
/*
useEffect接受两个参数
callback: 回调函数,第一次会默认执行一次,内部可以return一个回调函数,当卸载组件时执行
arr: 监控变量的数组,如果不传入arr则默认监控全部的变量,
	 如果传入并且为空,则相当于生命周期的DidMount;
	 如果有值则当里面的值变化时会再执行callback,相当于update生命周期
*/
let [c, setC] = useState(0);
useEffect(()=>{
		setC(++c)
	});
// 会一直执行,没有arr默认监控全部,setC之后c变了,再执行setC然后循环
useEffect(()=>{
		setC(++c)
	}, [c]);
// 会一直执行,c被监控了,setC之后c变了,再执行setC然后循环
useEffect(()=>{
		setC(++c)
	}, []);
// 只会运行一次,没有监控只有默认的一次调用setC

// 可以在内部控制逻辑
useEffect(()=>{
	if(c<10){
		setC(++c)
	}
}, [c]);
// 但是不能在外面控制
if(c<10){
	useEffect(()=>{
		setC(++c)
	}, [c]);
}
// 因为react的hooks是通过位置进行匹配的,如果用了逻辑判断执行可能会造成错位,导致意想不到的bug
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

react,useEffect一直重复执行 的相关文章

  • Three.js:缩放几何图形后错误的 BoundingBox

    在我的场景中 我有一个简单的立方体 var test new THREE Mesh new THREE CubeGeometry 10 10 10 new THREE MeshBasicMaterial scene add test 该立方
  • 在新的 Google 协作平台 <嵌入 HTML> 中使用 localStorage 和 IndexedDB 不起作用

    我正在尝试将新的 Google 协作平台用于我开发的网页 但是 我在存储本地数据时遇到了问题 本地文件在 Windows 和 Apple safari chrome 中运行良好 从 Google 协作平台尝试一下 没有什么乐趣 此外 在 s
  • 使用 JavaScript 禁用第三方 cookie

    我正在努力根据所有在欧盟运营的公司的数据保护规则实施新的 Cookie 政策合规性 根据该规则 用户在使用任何网站时必须能够拒绝 接受除必需的 Cookie 之外的所有内容 在我客户的网站中 我可以看到正在存储以下第三方 cookie ga
  • 摩卡 - Chai Karma“套件未定义”

    我对 jscript tdd 很陌生 遇到了问题 希望有人能告诉我我在做什么 在浏览器中运行测试 通过 HTML 文件 一切正常 通过节点和业力运行它们我得到以下异常 我想在 node js 主机的 karma 中使用 Mocha 和 Ch
  • 隐藏 Div 的父级

    我只是想隐藏父divcomments section div class content content green div div div 我试过这个 document getElementById comments section pa
  • 如何让 Django 和 ReactJS 协同工作?

    New to Django and even newer to ReactJS I have been looking into AngularJS and ReactJS but decided on ReactJS It seemed
  • 将 GMT 时间转换为当地时间

    我以这种格式从我的服务器获取 GMT 时间 Fri 18 Oct 2013 11 38 23 GMT 我的要求是使用Javascript将此时间转换为本地时间 例如 如果用户来自印度 首先我需要采用时区 5 30并将其添加到我的服务器时间并
  • 调整图像大小并将画布旋转 90 度

    这里有很多关于在 js 上使用画布旋转图像的主题 我阅读了其中的大部分内容 但无法找到解决我的问题的方法 我正在接收任何分辨率的图像 来自上传组件 我将其大小调整为 1024x768 如下所示 var canvas document cre
  • 检查 jQuery 1.7 中是否存在基于文本的选择选项

    所以我有以下 HTML 片段
  • React onClick 事件仅在渲染组件时触发

    动态渲染组件的 onClick 函数应通过 useState 设置所选日期 imgs 上的 onClicks 完全按照您的预期工作 没有任何问题 即使只是在其位置放置一个带有 onClick 属性的 div 也是行不通的 当组件渲染时 on
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • 页面上使用 HTML Editor Extender 进行回发会导致 IE11 中出现 JavaScript 错误

    我已将 HTML 编辑器扩展程序添加到我正在处理的页面中 现在每当我在页面上发回帖子时 都会收到以下 Javascript 错误 JavaScript 运行时错误 参数无效 之后什么也没有发生 这在 IE10 或更低版本以及我所知道的所有其
  • 在 Shopify 商店中嵌入 Vue 组件

    在产品页面中 我尝试显示自定义 Vue 组件 为简洁起见 该组件根据给定的产品 ID 显示 Firebase 数据库中的一些信息 我最初尝试将其制作为 Shopify 应用程序 以便我可以访问他们的 API 我实现了 OAuth 并且可以检
  • 如何隐藏/禁用 Highcharts.js 中的图例框?

    我想问是否可以使用 HighCharts js 库隐藏图表中的所有图例框 var chart object chart renderTo render to type graph type colors graph colors title
  • Javascript - 水波纹效果

    我需要 JS 上的脚本 它将以 水波纹 样式更改 images html 抱歉 6MB GIF 文件 http fcuunited ru temp listening2 gif http fcunited ru temp listening
  • 用于交互式图形绘制的轻量级 JavaScript 库? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我有兴趣了解用于绘制交互式图表的最轻量级 javascript 库 我掌握的数据主要是与海洋研究相关的科学数据 我知道一些 jquery
  • 从 FileReader 设置背景图像样式

    我正在寻找一种解决方案 允许我从文件上传输入中获取文件并通过设置 document body style backgroundImage 来预览它 以下代码用于在 Image 元素中显示预览 function setImage id tar
  • 如何确定所有角度2分量都已渲染?

    当所有 Angular2 组件完成渲染时 是否会触发一个角度事件 For jQuery 我们可以用 function 然而 对于 Angular2 当domready事件被触发 html 只包含角度组件标签 每个组件完成渲染后 domrea
  • 如何在执行新操作时取消先前操作的执行?

    我有一个动作创建器 它会进行昂贵的计算 并在每次用户输入内容时调度一个动作 基本上是实时更新 但是 如果用户输入多个内容 我不希望之前昂贵的计算完全运行 理想情况下 我希望能够取消执行先前的计算并只执行当前的计算 没有内置功能可以取消Pro
  • 如何在react-highcharts中使用图表工具提示格式化程序?

    如何使用图表工具提示格式化程序 我正在使用高图表的反应包装器 我有这样的配置 const CHART CONFIG tooltip formatter tooltip gt var s b this x b each this points

随机推荐

  • ROS建模仿真(1)-创建机器人模型

    ROS建模仿真 1 创建机器人模型 创建catkin creat pkg功能包 创建机器人描述文件 创建launch文件 创建catkin creat pkg功能包 创建机器人描述文件 创建launch文件 创建catkin creat p
  • Mac OS上使用ffmpeg的“血泪”总结

    标题真不是夸张 这几天在整理视频相关的处理流程 为了获得一些性能数据 打算在自己的MacBook Pro 上面装ffmepg 这一折腾4 5天就过去了 有些问题 在解决之后就豁然开朗了 没有解决之前 真的是百思不得其解 中间就好像隔着一层纱
  • AF_INET和AF_PACKET区别

    http blog csdn net kzm2008 article details 5372834 man 7 ip man 7 packet Packet sockets are used to receive or send raw
  • 单片机蓝桥杯——定时中断实现数码管显示、按键判断

    1 1ms定时中断T0 控制数码管显示 1 关于中断 关于定时中断的初始化函数可直接在STC ISP软件上生成 如下图所示 注意 初始化函数中并没有打开EA和ET0 需要自己加上 2 关于数码管显示 数码管段码 segCode 0 segC
  • Flutter提供者模式说明

    在本文中 我们将介绍Flutter中的Provider模式 Google的工作小组建议使用提供程序模式 他们还在Flutter的Pragmatic State Management中的 Google I O 2019上进行了介绍 其他一些模
  • Nginx的Gzip压缩

    Nginx的Gzip压缩 Nginx开启Gzip压缩功能 可以使网站的css js xml html 文件在传输时进行压缩 提高访问速度 进而优化Nginx性能 在Nginx配置文件中可以配置Gzip的使用 相关指令可以在http区域 se
  • Java流程控制--分支结构

    Java流程控制 分支结构 if 单分支 结构 if 条件表达式 这个表达式的结果是布尔值 要么是false 要么是true 如果上面 中的表达式返回结果是true 那么执行 中代码 如果上面 中的表达式返回结果是false 那么不执行 中
  • Unity的Audio组件命令有哪些

    Unity 的 Audio 组件命令有以下几种 Play 播放音频 Pause 暂停音频 UnPause 取消暂停音频 Stop 停止播放音频 SetScheduledStartTime 设置音频开始播放的时间 SetScheduledEn
  • SpringBoot使用Redisson做延迟队列案列(超详细)

    背景 有些场景下 需要延迟触发一些任务 比如 延迟几秒钟发送短信或者邮件 某些业务系统回调 需要延时几秒钟后回调 当然 实现延时触发的方式有很多 我这里采用 redisson 的 RDelayedQueue 一是因为接入简单 二是没有分布式
  • post使用form-data和x-www-form-urlencoded的本质区别

    一是数据包格式的区别 二是数据包中非ANSCII字符怎么编码 是百分号转码发送还是直接发送 一 application x www form urlencoded 1 它是post的默认格式 使用js中URLencode转码方法 包括将na
  • 修改onnx模型输出示例

    前言 如图是netron github链接 软件中打开的onnx模型 可以看到右边模型的最终输出结果是分类值predict 0而非概率值 那么如何获取中间过程的概率值 或者说怎么把右边的图砍掉一截变成左边的图呢 代码 读入模型 import
  • keras_cv进行数据增强

    使用keras cv来做分类数据增强 以下直接上流程 具体的原理和代码上github查看源码及配合tensorflow官网及keras官网来做处理 当前 2022 10 8 这些文档还不是很全 import os import numpy
  • Shell 运行shell脚本的多种方法

    详情地址 运行shell脚本的多种方法 小步教程 Shell 运行shell脚本的多种方法 运行shell脚本文件可通过两类方法 方法1 bash执行 语法 sh 文件 文件可使用相对路径或绝对路径 示例 sh 01hello sh 等价写
  • 游戏出现GetThreadContext failed报错 Unity开发

    解决方案 1 检查是否有360 有的情况 1 简单方案 卸载360 2 专业方案 将游戏exe添加到360信任名单中 解释 360会将一些模拟按键视为木马 然后游戏运行一般直接闪退 2 检查防火墙 专业方案 将游戏exe加入防火墙允许应用的
  • 多端技术栈uniapp开发优势是什么?适合哪种类型产品开发?

    uniapp是一种基于Vue js的跨平台开发框架 它可以支持以单一代码库编写多个平台的应用程序 包括iOS Android Web等 以下是uniapp开发的优势和适用类型的介绍 1 跨平台开发 相比于传统的原生开发 uniapp可以基于
  • tar 打包、压缩和备份

    如何理解 首先讲两个概念 打包 将一大堆文件或目录变成一个总的文件 压缩 将一个大的文件通过压缩算法变成一个小文件 这两种场景一定要区分开 网络上有的技术文章 将tar命令解释为压缩命令 是不完全正确的 关于此点 本文不再拓展 感兴趣的可以
  • 黄页是什么意思

    黄页 起源于北美洲 1880年世界上第一本黄页电话号簿在美国问世 至今已有100多年的历史 黄页是国际通用按企业性质和产品类别编排的工商电话号码薄 相当于一个城市或地区的工商企业的户口本 国际惯例用黄色纸张印制 故称黄页 目前我们常说的黄页
  • Python 类型提示和静态类型检查

    介绍 在本文中 将了解 Python 类型检查 Type Checking 在本教程中 将了解以下内容 类型注释和类型提示 将静态类型添加到代码中 包括你的代码和其他人的代码 运行静态类型检查器 在运行时强制类型 视频介绍如下 Python
  • 树莓派软键盘乱码

    树莓派软键盘乱码的快速处理 matchbox keyboard的显示 处理办法 matchbox keyboard的显示 正常的Matchbox keyboard安装完成后应该出现如下的界面 但是 在初次安装时 发现部分用户的界面出现乱码情
  • react,useEffect一直重复执行

    import useState useEffect from react useEffect callback arr useEffect接受两个参数 callback 回调函数 第一次会默认执行一次 内部可以return一个回调函数 当卸