React学习day04-useEffect、自定义Hook函数

news2024/11/13 9:20:29

11、useEffect(一个React Hook函数)

(1)作用:用于在React组件中创建不是由事件引起而是由渲染本身引起的操作,比如发送AJAX请求,更改DOM等(即:视图渲染完后会触发一些事件)

(2)语法:(useEffect(()=>{},[]))

        1)参数1是一个函数,也叫副作用函数,可在其内部放置执行的操作
        2)参数2是一个数组(可选参),在数组里放置依赖项,不同依赖项会影响第一个参数  的执行,当是一个空数组的时候,副作用函数只会在组件渲染完毕之后,执行一次

(3)示例(使用useEffect为list赋值)

已知:

        1)导入

        2)使用useEffect赋值

        3)效果

(4)useEffect依赖项

已知:

        1)没有依赖项:副作用函数在(组件初始渲染+组件更新)时执行

组件初始渲染:

组件更新:

        2)空数组依赖:副作用函数在(只在组件初始渲染)时执行

(当组件更新后不再执行)

        3)添加特定依赖项:副作用函数在(组件初始渲染+特性依赖项变化)时执行

初始:

依赖项变化(+1之后):

(5)useEffect清除副作用

        1)副作用操作:在useEffect中编写的由渲染本身引起的对接组件外部的操作
        2)清除副作用:比如清除useEffect中开启的定时器,在组件卸载时清除该定时器,这个过程,叫清除副作用
        3)清除副作用函数的执行时机:在组件卸载时自动执行
        4)示例(清除useEffect中的定时器):

已知:

12、自定义Hook函数

(1)概念:以use开头的函数

(2)作用:实现逻辑的封装和复用

(3)使用规则

        1)只能在组件中或者其他自定义Hook函数中调用,不能在文件最顶层使用

        2)只能在组件的顶层调用,不能嵌套在if、for、其他函数中

(4)语法步骤(以实现组件的动态切换显示与隐藏为例):

(不封转实现)

        1)声明一个以use开头的函数

        2)在函数内封装可复用的代码

        3)将组件中需要用到的状态或回调return出去

        4)使用以use开头的函数(在需要使用状态或回调的组件内解构出相应的状态和回调函数)

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

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

相关文章

网络游戏服务器如何有效防护DDoS与CC攻击

随着网络游戏行业的蓬勃发展,其背后的服务器架构日益复杂,同时也面临着前所未有的网络安全威胁。其中,分布式拒绝服务(DDoS)和CC(Challenge Collapsar)攻击尤为突出,它们通过大量伪造…

90.游戏安全项目-项目搭建与解析

免责声明:内容仅供学习参考,请合法利用知识,禁止进行违法犯罪活动! 内容参考于:易道云信息技术研究院 上一个内容:89.游戏安全项目-htdSdk安装 79.游戏分析工具闪屏问题优化与数据被修改高亮 这里面有注…

权力迷宫:皇权、律法与人性的深度博弈

权力迷宫:皇权、律法与人性的深度博弈 - 孔乙己大叔在人类社会的复杂织锦中,权力与律法的关系往往呈现出一种微妙而深刻的悖论。律法,这一社会秩序的基石,常被视作维护公正、约束行为的利器,然而,在金字塔的…

深度理解指针(5)----指针完结

hello,各位小伙伴们我们现在已经对指针有了深刻的理解,指针来到了收尾环节!让我们来做几题例题来复习之前学习的内容吧! 最近爆火的黑神话悟空不知道小伙伴们体验了没有,小编对八戒还有蜘蛛精的凄惨爱情深深打动特意找…

Springboot使用Mongo数据库实现文件的上传下载预览等服务接口

MongoDB GridFS 简介 MongoDB GridFS是一个用于存储和检索大型文件的规范,它允许在MongoDB数据库中存储超过16MB的文件,如图片、音频、视频等。GridFS通过将文件分割成多个小的chunk(文件片段),每个chunk通常为255KB&…

记URL重定向漏洞骚技巧

0x1 前言 这几天跟着我那几个师傅们在学习URL重定向漏洞,学习了比较多的对于这个漏洞的骚技巧,以及在挖掘edusrc漏洞和企业src相关的URL重定向漏洞时的一些技巧和不错的思路。 最近在跟我那几个师傅们研究学习URL重定向漏洞,然后在一些厂商…

EHS综合管理解决方案落地:管理效率飞升70%!

所有制造企业都面临着一个问题:如何保证EHS制度高质、高效执行?——上海斯歌EHS综合管理解决方案应运而生。 前不久,上海斯歌EHS综合管理解决方案(企业安环综合管理解决方案)在某全球领先的汽配公司成功落地&#xff0…

安灯系统在汽车电子工厂应用案例汇总

在汽车电子工厂中,高效的生产管理和及时的问题解决至关重要。安灯系统作为精益制造执行中的核心工具也是 MES 制造执行系统的重要组成部分,为汽车电子工厂带来了显著的效益。安灯系统是一个面向制造业生产现场,快速联络生产、物料、维修、主管…

VSCode中TypeScript调试配置

一、背景 最近想用TypeScript编译项目,在创建完项目后,我发现VSCode只有在调试TypeScript的单个文件时生效,如果存在引用,再进行断点调试,则调试功能不生效了。 随后,我让Chatgpt 生成一个一套配置&#…

C语言基础(二十五)

栈排序不是最高效的方法,因为栈是一种后进先出(LIFO, Last In First Out)的数据结构,而排序要求根据元素的顺序(如升序或降序)重新排列。但是,可以利用栈的特性,结合其他排序算法的思…

group by 中一定要包含 select 中的 除聚合函数以外 的 所有字段

今天在项目过程中报错: ### SQL: SELECT UNIT_NAME,dc.CAPTION as area,ifnull(a.bgSum,0) AS bgSum,ifnull(concat(FORMAT(a.bgSum/k.m*100,1),%),0.0%) as bgRatio FROM inspection_station_info isi left join dic_content dc on dc.CODE_VALUE…

K 线图快速绘制教程:使用 KLineChart 展示 DolphinDB K 线

KLineChart 是一款开源、简单易用、适用场景丰富的 Web 前端金融图表,基于 html5 canvas 构建,零依赖压缩包仅 40K,非常轻量。它可以用于渲染金融 K 线图,同时支持多种数据源,提供了丰富的交互功能以及指标计算接口。由…

动物消消乐:Scratch消除类游戏作品

小虎鲸Scratch资源站-免费Scratch作品源码,素材,教程分享平台! 体验《动物消消乐》,开启欢乐消除之旅! 在这个快节奏的时代,放松心情、享受乐趣显得尤为重要。小虎鲸Scratch资源站为您带来了全新的游戏体验——《动物消消乐》。这款游戏不仅…

【CTF Web】BUUCTF Upload-Labs-Linux Pass-01 Writeup(JS分析+代码审计+文件上传)

Upload-Labs-Linux 1 点击部署靶机。 简介 upload-labs是一个使用php语言编写的,专门收集渗透测试和CTF中遇到的各种上传漏洞的靶场。旨在帮助大家对上传漏洞有一个全面的了解。目前一共20关,每一关都包含着不同上传方式。 注意 1.每一关没有固定的…

上班摸鱼的人怎么治理?只要5个步骤让员工服服帖帖,打造干净职场

在职场中,我们时常会遇到一些同事在上班时间“摸鱼”,比如浏览与工作无关的网站、玩游戏、聊天等。这些行为不仅影响了工作效率,还可能损害团队的整体氛围和企业的利益。那么,如何有效地治理这种“摸鱼”现象呢?今天&a…

鸿蒙ArkTS小案例-购物车

最近用鸿蒙的ArkTS做了一个购物车的小案例,在这里分享一下,该购物车已实现如下功能: 1. 购物车商品数量支持1个或者多个 2. 勾选1个或者多个商品后,底部可以动态计算出购买总数量和总价格 3. 同时,可以对购买商品的…

SpringBoot对接Midjourney Api

提示&#xff1a;SpringBoot对接Midjourney Api 文章目录 目录 文章目录 后端代码 导包 controller层 工具类层 前端代码 申请API 测试结果 后端代码 导包 <!--添加hutool的依赖--><dependency><groupId>cn.hutool</groupId><artifactId&g…

IoT客户端+联邦学习微调大模型

大型模型的训练涉及到微调&#xff0c;微调则面临着高质量数据的稀缺性。与基于集中式数据中心的解决方案相比&#xff0c;物联网-IoT中大型模型的更新面临着分布式客户端私有且异构数据的协调挑战。为了解决这一挑战&#xff0c;作者提出了KOALA来推动物联网中大模型的训练。由…

单线程Redis:Redis为什么这么快

1 Redis是不是单线程 Redis 使用后台线程执行耗时的 I/O 操作&#xff0c;以免阻塞主线程 bio_close_file&#xff1a;后台 I/O 线程之一&#xff0c;异步关闭文件 bio_aof_fsync&#xff1a;后台 I/O 线程之一&#xff0c;异步地将 AOF&#xff08;Append Only File&#xff…

C++系列-STL容器之vector

STL概念 vector基本概念vector与数组的区别vector容器的特点动态大小连续存储自动扩容尾部操作高效 vector动态扩展的含义vector常用的接口示意 vector的构造函数vector赋值操作重载赋值assign赋值 vector的容量和大小vector的插入和删除vector数据存取vector互换容器vector互换…