React Hooks 中的 useEffect(副作用)

useEffect 是什么?

useEffect 是一个 React Hook,它允许你将组件与外部系统同步

当我们在 React 中使用 useEffect 这个 Hook 时,实际上是在告诉 React 在特定情况下执行我们定义的副作用函数。这种副作用函数可以处理一些与组件渲染结果无关的操作,例如数据获取、订阅事件、手动操作 DOM 等。

副作用函数作为 useEffect 的第一个参数传入。每当组件更新并重新渲染时,React 都会检查是否有副作用函数需要执行。但是,如果你想控制副作用函数的执行时机,可以传入第二个参数,这个参数是一个依赖数组。只有当依赖数组中的值发生变化时,副作用函数才会执行。

  • 如果将依赖数组设置为空数组:[],副作用函数将仅在组件第一次渲染时执行。这对于只需要执行一次的副作用操作非常有用,比如进行初始化的数据获取或订阅事件。
 // 挂载时执行,页面创建时只执行一次useEffect(() => {console.log("建立游戏连接");}, []);
  • 如果依赖数组中包含某个值:[value],副作用函数将在组件首次渲染时执行,以及该值发生变化时执行。这对于根据特定值来执行操作非常有用,比如根据输入值来查询数据。
 // 更新时,当监听的依赖项变动时触发useEffect(() => {console.log("当前游戏为:", optionValue);}, [optionValue]);
  • 如果不传递依赖数组,副作用函数将在每次组件重新渲染时都会执行。这可以用来处理具备实时更新需求的副作用操作,比如实时订阅数据或通过 WebSocket 接收数据。

  • 销毁时执行

 // 销毁时useEffect(() => {return () => {console.log("已断开连接");};}, []);

生命周期钩子函数为主执行:分别在每个钩子函数中,实现一个完整功能的部分效果

以功能为主执行:一个功能的所有效果放在一起实现

在开发中更常用的是 【以功能为主执行】,将代码整合,放在一起

 useEffect(() => {console.log("1 建立游戏连接:", optionValue, num, str);return () => {console.log("2 断开游戏连接:", optionValue);};}, [optionValue, num, str]);

它的执行流程为:1挂载:1 2更新:21 3卸载:2

  • 需要作为依赖项的值:Effect 中用到的可变的值,比如:prpos/state/组件内创建的变量等

  • 不需要则作为依赖项的值:组件外创建或导入的变量、函数的等

总的来说 useEffect 是 React 提供的一个 Hook,用于处理副作用操作。它的主要功能可以总结如下:

  1. 定义副作用函数:通过 useEffect,我们可以定义一个副作用函数,用于执行与渲染无关的操作。副作用函数可以包含任意代码,比如数据获取、订阅事件、手动操作 DOM 等。

  2. 控制副作用函数的执行时机:useEffect 的第一个参数是副作用函数。每当组件完成渲染后,React 就会检查是否需要执行副作用函数。通过传递一个依赖数组作为 useEffect 的第二个参数,可以控制副作用函数的执行时机。

  3. 组件挂载时执行副作用函数:当组件首次渲染时,副作用函数会被执行一次。这对于一些初始化操作非常有用,比如进行数据获取、订阅事件等。

  4. 组件更新时重新执行副作用函数:如果依赖数组中的任何依赖项发生变化,副作用函数会被重新执行。这使得我们可以根据特定的值或状态来更新副作用操作,以保持与组件的同步。

  5. 组件卸载时执行清理操作:如果我们在副作用函数中返回一个清理函数,它将在组件卸载时被调用。这可以用来取消订阅、清除定时器或执行其他必要的清理操作。

通过使用 useEffect,我们可以在函数式组件中处理副作用操作,并且能够灵活地控制这些操作的执行时机和清理。这为我们提供了一种方便的方式来管理组件的副作用,使得代码更简洁、可维护。

在使用它的依赖项时应注意 当使用 useEffect 时,我们应该根据具体开发场景来注意依赖项的设置。以下是一些常见开发场景和相应的依赖项注意事项:

  1. 数据获取和异步操作:

    • 如果副作用函数需要使用组件内部的状态或属性来触发数据获取,那么在依赖项中包含这些相关的状态或属性。
    • 如果数据获取是通过网络请求等异步操作进行的,需要确保依赖项不会在每次数据更新时重新触发数据获取。可以使用 useEffect 的清理函数来取消之前的请求。
  2. 监听事件或订阅:

    • 如果副作用函数需要监听全局事件或进行订阅,需要在依赖项中包含相关的事件或订阅源。
    • 在清理函数中,需要取消事件监听或取消订阅,以避免内存泄漏。
  3. 使用第三方库或外部资源:

    • 如果副作用函数使用了第三方库或外部资源(比如地图、音频等),需要根据文档或库提供的使用方式设置依赖项。
    • 在清理函数中,需要进行资源释放或销毁操作,以确保不会出现资源泄漏或内存溢出。
  4. 组件内部状态更新:

    • 如果副作用函数中使用了组件内部的状态,并且希望在状态更新时重新执行副作用函数,需要在依赖项中包含这些状态。
    • 需要注意避免创建闭包陷阱,可以使用 useCallback 或函数式更新来确保正确的依赖项设置。
  5. 优化性能:

    • 如果副作用函数不依赖任何值或状态,且其效果可以被忽略,可以省略依赖项,以避免不必要的重复执行。
    • 如果副作用函数只需要在组件挂载和卸载时执行一次,可以将依赖项设置为空数组 []

根据具体的开发场景和需求,我们需要仔细考虑哪些值和状态对副作用函数的正确执行起到关键作用,并相应地设置依赖项,以保证正确性和性能。

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

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

相关文章

SpringBoot 日志文件

一、日志的作用 日志是程序的重要组成部分,想象一下,如果程序报错了,不让你打开控制台看日志,那么你能找到报错的原因吗 答案是否定的,写程序不是买彩票,不能完全靠猜,因此日志对于我们来说&a…

C语言数组笔试题(详解)

目录 插入知识: 一.指向函数指针数组的指针 二.回调函数 什么是回调函数? 三.数组笔试题 个人名片: 🐼作者简介:一名乐于分享在学习道路上收获的大二在校生🐻‍❄个人主页:GOTXX &#x1f4…

【Apollo学习笔记】—— 相机仿真

文章目录 前言相关代码整理 测试实践文件目录包管理BUILD文件以及cyberfile.xml文件源程序BUILD运行结果其他参考CameraOutput channels启动camera驱动启动camera video compression驱动 前言 本文是对Cyber RT的学习记录,文章可能存在不严谨、不完善、有缺漏的部分&#xff0…

[迁移学习]领域泛化

一、概念 相较于领域适应,领域泛化(Domain generalization)最显著的区别在于训练过程中不能访问测试集。 领域泛化的损失函数一般可以描述为以下形式: 该式分为三项:第一项表示各训练集权重的线性组合,其中π为使该项最小的系数&a…

react工程化配置

道阻且长,行而不辍,未来可期 1.安装react yarn create react-app demo --template typescript cd demo yarn start2.配置蓝图模版 2.1安装blueprint插件 https://github.com/shredor/blueprint-templates-cli#readme yarn add blueprint-templates-c…

PB:DDE服务器函数

1、GetCommandDDE() 功 能:得到DDE客户应用发送的命令。 语 法:GetCommandDDE ( string ) 参 数:string:string类型的变量,用于保存DDE客户应用发送的命令。 返回值:Integer。函数执行成功时返回1,发生错误时返回-1。如果string参数的值为NULL, GetCommandDDE()…

WAF绕过-漏洞利用篇-sql注入+文件上传-过狗

WAF绕过主要集中在信息收集,漏洞发现,漏洞利用,权限控制四个阶段。 1、什么是WAF? Web Application Firewall(web应用防火墙),一种公认的说法是“web应用防火墙通过执行一系列针对HTTP/HTTPS的安…

webpack基础知识六:说说webpack的热更新是如何做到的?原理是什么?

一、是什么 HMR全称 Hot Module Replacement,可以理解为模块热替换,指在应用程序运行过程中,替换、添加、删除模块,而无需重新刷新整个应用 例如,我们在应用运行过程中修改了某个模块,通过自动刷新会导致…

《编程匠艺》读书笔记(二)

文章目录 前言七、代码工具7.1 在意工具7.2 了解工具7.3 选择工具 八、代码测试8.1 Why/Who/What/When/How8.2 测试类型8.3 测试原则 九、代码bug调试9.1 bug种类9.2 调试解决bug9.3 搜寻bug9.4 修正bug 十、代码构建10.1 编程语言10.2 构建系统 十一、代码优化11.1 优化是什么…

【C#学习笔记】装箱和拆箱

文章目录 装箱和拆箱性能消耗装箱拆箱 比较var&#xff0c;object&#xff0c;dynamic&#xff0c;\<T\>varobject\<T\> 泛型dynamic 装箱和拆箱 在讲引用类型object的时候&#xff0c;我们说它是万能的&#xff0c;却没说它万能在哪里。 除了object为每一种变量…

Grafana集成prometheus(4.Grafana添加预警)

上文已经完成了grafana对prometheus的集成及数据导入&#xff0c;本文主要记录grafana的预警功能&#xff08;以内存为例&#xff09; 添加预警 添加入口&#xff08;2个&#xff09; databorard面板点击edit&#xff0c;下方有个Alert的tab&#xff0c;创建Alert rules依赖…

ffmpeg + nginx 实现rtsp视频流转m3u8视频流,转码推流(linux)

FFmpeg即是一款音视频编解码工具&#xff0c;同时也是一组音视频编码开发套件&#xff0c;作为编码开发套件&#xff0c;它为开发者提供了丰富的音视频处理的调用接口。 FFmpeg提供了多种媒体格式的封装和解封装&#xff0c;包括多种音视频编码、多种协议的流媒体、多种多彩格式…

Redis常见面试题

Redis面试题 1、什么是 Redis? Redis 是完全开源免费的&#xff0c;遵守 BSD 协议&#xff0c;是一个高性能的 key-value 数据库。 Redis 与其他 key - value 缓存产品有以下三个特点&#xff1a; Redis 支持数据的持久化&#xff0c;可以将内存中的数据保存在磁盘中&#…

Linux内核网络参数调优命令

文章目录 ulimit -nsomaxconn Socket参数netdev_max_backlog参数tcp_max_syn_backlog参数 ulimit -n ulimit -n 是用于查看或设置当前用户进程打开文件描述符的最大值。文件描述符是操作系统用来访问文件或者其他I/O资源的一种抽象表示。在Linux和类Unix系统中&#xff0c;每个…

苹果电脑第三方应用程序卸载工具CleanMyMacX4.14

CleanMyMacX&#xff0c;这是一款可以帮助你快速识别并卸载电脑上的多个应用程序的第三方工具&#xff0c;省去了逐个卸载的繁琐步骤。 我们首先要到下载CleanMyMacX&#xff0c; CleanMyMac X全新版下载如下: https://wm.makeding.com/iclk/?zoneid49983 然后&#xff0c…

基于java数据结构学习网设计与实现

摘 要 随着计算机信息化时代的来临&#xff0c;教育的信息化发展也日新月异。特别是高等院校对于教育信息化的重视程度越来越高&#xff0c;教育信息化必须要投入大量的时间精力去开发一套管理系统&#xff0c;本文论述了信息化的管理手段在日常教学、考试过程中的重要性和必要…

【项目 计网2】4.4网络模型 4.5协议 4.6网络通信的过程

文章目录 4.4网络模型OSI七层参考模型TCP/IP四层模型&#xff08;常用&#xff09;简介四层介绍 4.5协议简介常见协议UDP协议TCP协议IP协议以太网帧协议&#xff08;MAC地址封装&#xff09;ARP协议&#xff08;IP->MAC&#xff09; 4.6网络通信的过程封装分用 4.4网络模型 …

1新手篇:熟悉 NestJS

前言 经过了需求分析以及技术选型之后,我们正式步入了第三个环节:脚手架搭建。 工欲善其事,必先利其器,NestJS 为开发者提供了很多开箱即用的功能,我们可以根据团队的需求搭建一套适配所有业务开发的基础脚手架。因此,接下来的 2 章是基础篇的教学,我将带领大家逐步学…

Stable Diffusion 硬核生存指南:WebUI 中的 GFPGAN

本篇文章聊聊 Stable Diffusion WebUI 中的核心组件&#xff0c;强壮的人脸图像面部画面修复模型 GFPGAN 相关的事情。 写在前面 本篇文章的主角是开源项目 TencentARC/GFPGAN&#xff0c;和上一篇文章《Stable Diffusion 硬核生存指南&#xff1a;WebUI 中的 CodeFormer》提…

k8s存储卷

目录 一、为什么要存储卷&#xff1f;二、emptyDir存储卷三、hostPath存储卷四、 nfs共享存储卷五、PVC 和 PV5.1 PV和PVC之间的相互作用遵循的生命周期5.2 PV 的状态5.3 一个PV从创建到销毁的具体流程 六、静态创建pv和pvc资源由pod运用过程6.1 在NFS主机上创建共享目录&#…