位置: IT常识 - 正文

React18的useEffect会执行两次

编辑:rootadmin
React18的useEffect会执行两次 React18的useEffect会执行两次一、执行两次的useEffect。二、React18 useEffect 新特性如何应对1.首先先了解一下 React 中 useEffect 执行的时机2.怎么样才能让 Effect 执行一次?。1)清理事件监听2-1)重置页面数据,清理属性状态2-2)重置页面数据,还原元素状态2-3)重置页面数据,弹窗类。3-1)异步请求页面数据处理,处理异步数据渲染3-2)异步请求页面数据处理,处理接口请求4)无须清理类5)日志 log 上报类一、执行两次的useEffect。

推荐整理分享React18的useEffect会执行两次,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

前段时间在本地启了一个 React Demo 项目,在编码的过程中遇到一个很奇怪的“Bug”。 其中简化版的代码如下所示。

// 入口文件import { StrictMode } from 'react';import * as ReactDOMClient from 'react-dom/client';import App from './App';const root = ReactDOMClient.createRoot(document.getElementById('root'));root.render( <StrictMode> <App /> </StrictMode>);// 组件代码import React, { useEffect } from 'react';const App = () => { useEffect(() => { console.log('组件挂载完成!'); }, []); return <>Hello world!</>;};

我是万万没想到,就这样几行简单的代码竟然会触发一个“Bug”。 此“Bug”的表现为:在 Chrome 控制台里发现 “Hello world!” 被打印了 “两次”。 刷新之后依然如此,当时就给我整懵了,第一感觉就是,这怎么可能? 很是纠结一番之后依然没想明白,于是试着去网上搜了一下,发现竟然有人同样遇到过这个问题。

通过网上指引,同时去官网查了一下,终于得出答案。

这不是 Bug,这是 React18 新加的特性。二、React18 useEffect 新特性1.这是 React18 才新增的特性。2.仅在开发模式("development")下,且使用了严格模式("Strict Mode")下会触发。 生产环境("production")模式下和原来一样,仅执行一次。3.之所以执行两次,是为了模拟立即卸载组件和重新挂载组件。 为了帮助开发者提前发现重复挂载造成的 Bug 的代码。 同时,也是为了以后 React的新功能做铺垫。 未来会给 React 增加一个特性,允许 React 在保留状态的同时,能够做到仅仅对UI部分的添加和删除。 让开发者能够提前习惯和适应,做到组件的卸载和重新挂载之后, 重复执行 useEffect的时候不会影响应用正常运行。如何应对

看过文档以及了解他们这么做的本意之后,我也能够理解他们会这样做了。 只是,对于这种半强迫式操作多少有些不喜欢,感觉是在代码中”被强迫打一针疫苗?”。

当然,人家就是这么干了,作为 React 的普通使用者,能做的就是 适应它 ,并按照它的规范来做。

1.首先先了解一下 React 中 useEffect 执行的时机Every time your component renders, React will update the screen and then run thecode inside useEffect.

每次组件渲染时,React 都会更新页面 UI,然后运行 useEffect 中的代码。

Effects run at the end of the rendering process after the screen updates

Effect 在屏幕更新之后的 rendering 进程结束的时候执行。

从上面可以得出结论,React 中的 useEffect 执行时机是在组件渲染之后(类似于 window(component).onload ?)。 因此,对于某些“副作用”的渲染,比如异步接口请求,事件绑定等操作我们通常都放在 useEffect 中执行。

当然,useEffect 除了在组件渲染的时候执行外,在组件卸载的时候也有相关执行操作。 在组件卸载的时候会执行 useEffect 方法的return语句。

useEffect(() => { window.a = 100; return (window.a = 0);}, []);

如上代码段,当组件渲染的时候会执行window.a = 100,当组件卸载的时候会执行window.a = 0。

知道了 useEffect 的执行时机,也就能明白为什么 React18 中 useEffect 会执行两次了。

因为, React18 在开发环境中除了必要的挂载之外,还 "额外"模拟执行了一次组件的卸载和挂载。React18的useEffect会执行两次

既然知道了原因,那么,接下来就是想办法解决了。

2.怎么样才能让 Effect 执行一次?。

对于这个问题,官方文档上面有一句原话:The right question isn’t “how to run an Effect once,” but “how to fix my Effect so that it works after remounting”.翻译一下,就是说:正确的问题不是“怎么样让 Effect 执行一次”,而是“怎样修复我的 Effect,让它在(重复)挂载之后正常工作” 也可以理解,毕竟在 React 的未来版本中做离屏渲染的时候 useEffect 肯定会多次执行的。 而且,即使是当前版本,在做页面的前进后退也会面临触发多次 useEffect。

所以,解决办法其实就是解决 重复挂载卸载之后 应用正常工作了。 ###3.具体的解决方法 我们知道 useEffect 支持返回一个函数,在组件卸载的时候就会执行该函数。 因此,通常正确解法就是 实现清理函数,并将其在 useEffect 中返回。 当然,不同的 Effect 需要有不同的清理方式。

在常用 Effect 分类下,大致有如下几类清理。

1)清理事件监听useEffect(() => { function handleScroll(e) { console.log(e.clientX, e.clientY); } window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll);}, []);

对于事件监听类函数,在返回函数内部“取消掉事件监听”即可。

2-1)重置页面数据,清理属性状态useEffect(() => { const node = ref.current; node.style.opacity = 1; // Trigger the animation return () => { node.style.opacity = 0; // Reset to the initial value };}, []);

对于一些页面属性的变更,在返回函数内部将其变更的属性进行还原。

2-2)重置页面数据,还原元素状态import { useEffect, useRef } from 'react';function VideoPlayer({ src, isPlaying }) { const ref = useRef(null); useEffect(() => { if (isPlaying) { ref.current.play(); } else { ref.current.pause(); } }); return <video ref={ref} src={src} loop playsInline />;}

涉及到元素状态的,比如播放器之类,需要对(元素)播放器的状态进行重置。

2-3)重置页面数据,弹窗类。useEffect(() => { const dialog = dialogRef.current; dialog.showModal(); return () => dialog.close();}, []);

如果是默认弹窗类,这种也算是元素状态,同样需要对其(弹出)状态进行重置。

3-1)异步请求页面数据处理,处理异步数据渲染useEffect(() => { let ignore = false; async function startFetching() { const json = await fetchTodos(userId); // 这里执行是异步的,所以第一次执行到此处的时候组件已经被卸载了 // 此时的 ignore 已经被 return 里面的方法置为 true 了 // 所以这里第一次执行的时候不执行 setTodos(json) // setTodos 其实是在第二次执行的时候才触发 if (!ignore) { setTodos(json); } } startFetching(); return () => { ignore = true; };}, [userId]);

如上代码,对于异步请求数据并渲染这一类。 我们可以设置一个 标识位,做到对 请求返回的数据 仅做一次处理与渲染setTodos(json)。 codesandbox 测试代码段

3-2)异步请求页面数据处理,处理接口请求

上面的方法虽然仅会渲染一次,但是请求依然发起了多次。 如果不希望请求多次,也可以使用请求接口数据的缓存方案,对返回数据进行缓存。

const cache = useRef(null);useEffect(() => { let ignore = false; async function startFetching() { if (!cache.current) { cache.current = await fetchTodos(userId); } if (!ignore) { setTodos(cache.current); } } startFetching(); return () => { ignore = true; };}, [userId]);

对于异步请求,除了可以处理渲染频率,还可以对接口的请求本身做缓存。 在前面3-1的基础上,缓存接口返回的数据,下次请求的时候如果已经有缓存数据了就直接用,无须再次发起请求。

4)无须清理类

并不是所有的 useEffect 函数都需要清理,对于一些没有副作用的函数,我们完全可以不做处理

useEffect(() => { const map = mapRef.current; map.setZoomLevel(zoomLevel);}, [zoomLevel]);

如上代码所示,setZoomLevel 方法仅仅是设置一下 Dom 元素的层级。 这种操作无论同时执行多少次都不会有太大的影响,所以对于这一类我们就随他去吧,毕竟线上也不会执行多次。

5)日志 log 上报类useEffect(() => { reportLog({ name: 'viewCount' });}, []);

对于日志上报类,其实也可以算是无须清理类,但是又有点特殊。 因为,对于日志类,首先在开发环境中我们其实是无须进行上报的,毕竟这种日志打上去也没啥用。 当然,如果是要对上报日志本身这个进行调试等必须上报的情形,这种也有三种应对方式:

方式一,在本地开发环境使用 console.log 来代替 reportLog。方式二,取消掉严格模式(StrictMode) 方式三,构建一个 production版本启动,或者将其部署到 QA 环境,部署的时候,指定 production 模式。

借鉴链接:大神地址:epoos

本文链接地址:https://www.jiuchutong.com/zhishi/293020.html 转载请保留说明!

上一篇:“Ninja is required to load C++ extensions”解决方案

下一篇:web网页设计期末课程大作业 HTML+CSS+JavaScript重庆火锅(代码质量好)(web网页设计期末作业猫眼电影首页)

  • 电脑怎么关闭键盘灯(电脑怎么关闭键盘窗口)

    电脑怎么关闭键盘灯(电脑怎么关闭键盘窗口)

  • 微信点进去才收到消息怎么办(微信点进去才收得到消息)

    微信点进去才收到消息怎么办(微信点进去才收得到消息)

  • b站实名认证怎么换绑(b站实名认证怎么修改)

    b站实名认证怎么换绑(b站实名认证怎么修改)

  • 电脑显示器型号在哪看(怎么看网吧电脑显示器型号)

    电脑显示器型号在哪看(怎么看网吧电脑显示器型号)

  • 小米10青春版与小米10区别(小米10青春版与小米11青春版对比)

    小米10青春版与小米10区别(小米10青春版与小米11青春版对比)

  • 手机网速莫名其妙变慢(手机网速莫名其妙很快)

    手机网速莫名其妙变慢(手机网速莫名其妙很快)

  • 在word文档怎么做表格(在word文档怎么把两页做成一页)

    在word文档怎么做表格(在word文档怎么把两页做成一页)

  • oppok3什么时候更新coloros7(oppok3什么时候停产)

    oppok3什么时候更新coloros7(oppok3什么时候停产)

  • redminote7是什么手机型号(redmi7a是什么手机)

    redminote7是什么手机型号(redmi7a是什么手机)

  • 华为mate30有无线充电吗(华为mate30有无线耳机吗)

    华为mate30有无线充电吗(华为mate30有无线耳机吗)

  • 淘宝开团提醒在哪里查看(淘宝开团提醒在哪里取消2023)

    淘宝开团提醒在哪里查看(淘宝开团提醒在哪里取消2023)

  • 40g等于多少mb(100g等于多少mb)

    40g等于多少mb(100g等于多少mb)

  • 微信的横屏模式是什么(微信的横屏模式找不到了)

    微信的横屏模式是什么(微信的横屏模式找不到了)

  • 苹果x自拍镜像怎么设置(苹果x自拍镜像怎么反过来)

    苹果x自拍镜像怎么设置(苹果x自拍镜像怎么反过来)

  • 抖音直播游戏怎么弄(抖音直播游戏怎么直播)

    抖音直播游戏怎么弄(抖音直播游戏怎么直播)

  • iphonexr港版有实体双卡吗(xr有港版吗)

    iphonexr港版有实体双卡吗(xr有港版吗)

  • 小米8可以语音唤醒吗(小米8语音助手怎么唤醒)

    小米8可以语音唤醒吗(小米8语音助手怎么唤醒)

  • qq音乐和qq音乐hd有何区别(qq音乐和qq音乐hd音质一样吗)

    qq音乐和qq音乐hd有何区别(qq音乐和qq音乐hd音质一样吗)

  • 苹果手机怎么转接电话(苹果手机怎么转移通讯录)

    苹果手机怎么转接电话(苹果手机怎么转移通讯录)

  • 微信耳朵模式如何去掉(微信耳朵模式如何关闭)

    微信耳朵模式如何去掉(微信耳朵模式如何关闭)

  • 如何解决Win10系统提示密码已过期拒绝访问?(如何解决win10系统安装不兼容驱动的问题)

    如何解决Win10系统提示密码已过期拒绝访问?(如何解决win10系统安装不兼容驱动的问题)

  • 家用电脑的基本维护常识(家用电脑分为哪几类)

    家用电脑的基本维护常识(家用电脑分为哪几类)

  • ChatGLM-6B:颠覆聊天AI的全新模型

    ChatGLM-6B:颠覆聊天AI的全新模型

  • python多线程和多进程之间的联系(python多线程多核)

    python多线程和多进程之间的联系(python多线程多核)

  • 个人所得税减除费用5000是什么意思
  • 小规模免缴增值税吗
  • 出差加油算什么费用
  • 混合销售行为如何缴纳增值税税率
  • 财务上用替票合法么
  • 非盈利组织是什么
  • 报关单和发票不符怎么办
  • 出售使用过的生产设备
  • 商业汇票的申请人是谁
  • 收到子公司非货币资产分配账务处理
  • 退货或者销毁处理
  • 有形动产租赁包括有形动产融资租赁
  • 收外汇需要提供什么
  • 在建工程转固后又发生成本
  • 开具房屋租赁发票税率
  • 2021申请一般纳税人公司的条件
  • 小规模纳税人是小微企业吗
  • 营改增后房产税计入什么科目
  • 国税网不能打印,怎么设置
  • 农副产品收购发票申请
  • 印刷制作费税收编码是啥
  • 开普票时开票码怎么开
  • 收到快递关税做什么科目
  • 个人租车给单位合同怎么写
  • 酷狗云盘是干什么用的
  • 苹果se和华为p9哪个好
  • 固定资产折旧计算方法
  • 腾讯电脑管家浏览器保护在哪
  • window102020年最新版本
  • 补缴社保公积金申请书怎么写
  • 计算机指令用来做什么
  • 白兰花的养殖方法和注意事项和病虫害
  • 若依框架使用
  • 详解中国女足出线形势
  • 特卡波小镇旅游攻略
  • 其它收益和递延收益
  • 销售多余材料的成本
  • 餐饮业开具增值税专用发票
  • thinkphp i方法
  • 电子承兑汇票到期提示付款后多久到账
  • 花生油代加工厂
  • 合伙企业个人所得税怎么算
  • 员工宿舍的物业费能否抵扣
  • 当月增加的固定资产当月不计提折旧
  • phpcms文档
  • 运输公司税务筹划
  • 科技局创业扶持资金
  • 自然人扣缴系统怎么申报个税
  • 医保指的是啥
  • 复印件可以作为会计原始凭证吗
  • 利息为什么存在
  • 个税申报工资比实发工资高
  • 专项应付款转入资本公积的规定
  • 当月没生产有生产费用怎么结转
  • 普通发票开具红字发票后发票联怎么处理?
  • 补缴以前年度企业所得税以及滞纳金
  • 企业的固定资产由于技术进步等原因
  • 防止服务器断电
  • win10屏幕显示
  • WinXP系统能上qq但打不开网页原因分析及解决方法
  • win7ie11如何降为ie8
  • linux diff用法
  • windows更新后一直在欢迎界面
  • cocos2dx游戏开发进阶卷这本书怎么样
  • cocos2dx ActionManager播放动画回调问题
  • reg add命令
  • jquery.ui
  • 手机gpu过度绘制
  • nodejs orm框架
  • shell获取字符串中的数字
  • js左值
  • android图片压缩到200-300kb
  • Android中使用HttpURLConnection和HttpClient实现GET和POST请求访问网络
  • Android调整按钮位置
  • 一般纳税人获得自产自销免税发票怎么处理
  • 怎么看上期留抵税额
  • 没有代理记账资质做代理记账业务
  • 厦门市税务局电话
  • 合并申报后老申报表还可以继续使用吗
  • 工会经费管理办法2021
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设