位置: 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网页设计期末作业猫眼电影首页)

  • 苹果a13处理器是哪几款手机(苹果a13处理器是几纳米)

    苹果a13处理器是哪几款手机(苹果a13处理器是几纳米)

  • 任务管理器已被系统管理员停用怎么办(任务管理器已被系统管理员禁用w10)

    任务管理器已被系统管理员停用怎么办(任务管理器已被系统管理员禁用w10)

  • 抖音注销对方关注里还有吗(抖音注销对方关注里还有我吗)

    抖音注销对方关注里还有吗(抖音注销对方关注里还有我吗)

  • 6.62英寸的手机有多大(6.62英寸的手机长宽多少)

    6.62英寸的手机有多大(6.62英寸的手机长宽多少)

  • qq语音怎么保存(qq语音怎么保存到手机本地)

    qq语音怎么保存(qq语音怎么保存到手机本地)

  • iphone充电到90充不进去(iphone充电90%以上就慢)

    iphone充电到90充不进去(iphone充电90%以上就慢)

  • 微信缩略图是什么意思(微信缩略图是什么格式)

    微信缩略图是什么意思(微信缩略图是什么格式)

  • 华为手机闹钟旁边的图标是什么(华为手机闹钟旁边那个标志是什么)

    华为手机闹钟旁边的图标是什么(华为手机闹钟旁边那个标志是什么)

  • 荣耀x10支持内存卡吗(荣耀x10支持内存扩展吗)

    荣耀x10支持内存卡吗(荣耀x10支持内存扩展吗)

  • 打印机没有wifi功能怎么连接手机打印(打印机没有wifi和蓝牙怎么连接手机)

    打印机没有wifi功能怎么连接手机打印(打印机没有wifi和蓝牙怎么连接手机)

  • 苹果2g运行内存相当于安卓多大(苹果2g运行内存带的动原神吗)

    苹果2g运行内存相当于安卓多大(苹果2g运行内存带的动原神吗)

  • 微型计算机控制器的基本功能是(微型计算机控制技术第二版课后答案潘新民)

    微型计算机控制器的基本功能是(微型计算机控制技术第二版课后答案潘新民)

  • 微信视频动态怎么屏蔽别人(微信视频动态怎么设置永久)

    微信视频动态怎么屏蔽别人(微信视频动态怎么设置永久)

  • 将汇编源程序翻译成目标程序的程序称为(将汇编源程序翻译成文档)

    将汇编源程序翻译成目标程序的程序称为(将汇编源程序翻译成文档)

  • iphonexr运行内存是多少(iphonexr运行内存是4g还是6g)

    iphonexr运行内存是多少(iphonexr运行内存是4g还是6g)

  • 调制解调器固件是什么意思(调制解调器固件怎么升级)

    调制解调器固件是什么意思(调制解调器固件怎么升级)

  • 为什么excel表格下面的栏不显示了(为什么excel表格打印只打印出一半)

    为什么excel表格下面的栏不显示了(为什么excel表格打印只打印出一半)

  • wps表格怎么批量查找人名(wps表格怎么批量删除空白行)

    wps表格怎么批量查找人名(wps表格怎么批量删除空白行)

  • 手机来电秀怎么取消(手机来电秀怎么关闭)

    手机来电秀怎么取消(手机来电秀怎么关闭)

  • 微信误删视频怎么恢复(微信误删除视频怎么恢复)

    微信误删视频怎么恢复(微信误删除视频怎么恢复)

  • 华为荣耀7双卡怎么放(华为荣耀7双卡双待有一个没信号)

    华为荣耀7双卡怎么放(华为荣耀7双卡双待有一个没信号)

  • 苹果8系统40g怎么清理(苹果手机系统8g)

    苹果8系统40g怎么清理(苹果手机系统8g)

  • 怎么把两个盘合成一个盘(怎么把两个盘合成一个)

    怎么把两个盘合成一个盘(怎么把两个盘合成一个)

  • 中国注册税务师报考条件
  • 员工交通费可以税前扣除吗
  • 国税地税电子钥匙价格
  • 开发票是否享受优惠政策
  • 交通补贴算工资收入吗
  • 茶叶自产自销成本核算
  • 小规模个体户营业执照一共几个章
  • 理财的利息收入计入什么科目
  • 融资租赁固定资产会计处理
  • 酒店内部招待费怎么记账
  • 暂估入库商品用什么科目
  • 物业公司管理费用
  • 购买的原材料直接用怎么做账
  • 置换回房产怎么过户
  • 工伤费用的伤残补助金属于福利费吗
  • 没有签字的支出凭证怎么处理?
  • 资本公积与实收资本和盈余公积有什么区别?
  • 退休人员返聘工资怎么缴税
  • 小规模转一般纳税人生效时间
  • 公司怎么给个人开票
  • 小规模纳税人应纳税额减征额怎么算
  • 挂账的费用怎么填制单据凭证
  • 专用发票抵扣联丢失怎么办最新规定
  • 土地闲置费能否扣除
  • 挂靠公司代收入税金如何做分录?
  • 厂家给返点算拿回扣吗
  • 资产处置损益借贷方向表示什么
  • 土地投资入股需要什么资料
  • 支票付款的弊端
  • 网上申报城建税及附加怎么操作
  • 资产负债表在建工程怎么填列
  • 税务稽查可以不罚款的情形
  • 华为mate x3最新价格
  • 如何使用php编程软件
  • win10电脑记事本打不开显示错误
  • 企业的各项费用
  • 定额征收的个体户怎么做账
  • nginx反向代理未知域名
  • 税收变动作用
  • 营改增通俗
  • 没有数据企业所需的资料
  • php获取长度
  • php常用命令
  • 服务器连接方式包括直接相连,间接连接
  • 售后租回融资租赁帐务处理怎么做?
  • 已经提完折旧的房产价值评估
  • 国税办税人员怎么解绑
  • 补交以前年度的城建税会计分录
  • 跨区域预缴税款流程
  • 发行价格另支付发行费用
  • 核定应税所得率征收
  • 调整以前年度的费用怎么做
  • 未开票收入怎么报税
  • 没有发票财务报表怎么做
  • 凭发票报销的通知简单
  • 固定资产净值怎么算
  • solaris 2020
  • 注册表 启动
  • 一键ghost的功能
  • winadm.exe - winadm是什么进程
  • 找不到config/index taro
  • linux 系统变量
  • jquery prototype
  • windows升级node版本
  • node.js详解
  • opengl入门教程
  • toggle button什么作用
  • 区分例假和怀孕前乳头疼
  • css浏览器兼容性问题
  • jquery1.8
  • Backbone.js 0.9.2 源码注释中文翻译版
  • jQuery Ajax传值到Servlet出现乱码问题的解决方法
  • javascript面向对象精要pdf
  • python for windows
  • python批量删除行
  • 付了120救护车费怎么报销
  • 农产品销售个人所得税
  • 白盘怎么开具红字专用发票
  • 发票扫码抽奖用什么软件
  • 事业单位的会计制度是什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设