React的Hooks

news2025/7/21 0:41:36

React Hooks

在这里插入图片描述
在这里插入图片描述

useState

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

useMemo 和usecallback

在这里插入图片描述
Hooks显示的指明因变量有什么好处
当使用时,y与changeX会被缓存下来,只要x不变,始终读取的是缓存的值,
如果不使用时,每次函数组件执行时,实际会基于x,创建新的y与changeX
这涉及到React的性能优化,
个人建议,在遇到性能优化的瓶颈之前,都可以暂时不使用这两个Hooks

在这里插入图片描述
在这里插入图片描述
副作用是函数式编程中的概念

对于一个函数,如果固定的输入一定会产生固定的输出,

如果这里面x是固定的,输出的结果就是一定的,那这说这是一个纯函数
在这里插入图片描述
但当我们引入随机数Z时,x一定是输出是不固定的
我们就可以说这个函数是包含副作用的
在这里插入图片描述

useEffect

在函数组件中,可以通过useEffect来定义有副作用的因变量,
假设我们希望当x变化后,将当前页面的标题修改为x的值
改变标题的这一行为就属于副作用
初次之外,比如请求数据,操作DOM,这些都属于副作用
我们都可以通过useEffect处理
在这里插入图片描述
在这里插入图片描述
可见,自变量变化,导致因变量变化,因变量不仅可以作用于视图,也能触发副作用
在这里插入图片描述
useState定义自变量
useMemo和useCallback定义无副作用的因变量
useEffect定义有副作用的因变量
useReducer可以看作是进阶版的useState,使用redux的理念将多个state合并为一个
本质上也是一个因变量

实例
在这里插入图片描述
在这里插入图片描述
一个组件的自变量和因变量,又可以作为另一个组件的自变量
当组件的层级变多时,自变量的传递变得十分繁琐,

在这里插入图片描述
为了解决上述问题,我们出现了

useContext

在第一级组件通过createContext创建context后
在第四级组件通过useContext
可以直接消费一级组件创建的context
通过这种方式使跨层级的传递自变量变得很简单,
在这里插入图片描述
通过这种方式使跨层级的传递自变量变得很简单,

useRef

做一些个性化的需求
在这里插入图片描述
我们希望组件奇数次更新时,显示x所在li,偶数次更新时不显示
我们需要一个变量,标记当前组件的更新次数
知道了次数,才能知道是当前是奇数次更新,还是偶数次更新
保存标记的变量既不是自变量也不是因变量,它仅仅是在路劲中起到缓存数据的作用
在这里插入图片描述

这就是useRef
在这里插入图片描述
就展示x所在的li,如果是偶数次就不展示

可以作用于自变量与因变量的不同路径中,增加组件逻辑的灵活性
在这里插入图片描述

总结
React Hooks的本质是自变量与因变量

useState定义自变量
useMemo和useCallback定义无副作用的因变量
useEffect定义有副作用的因变量
useReducer
可以看作是进阶版的useState,使用redux的理念将多个state合并为一个
本质上也是一个因变量,为了方便操作更多的自变量
useContext
为了跨组件层级的操作自变量,有了useContext
useRef
为了组件逻辑更灵活有了useRef

学习视频

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

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

相关文章

计算机写论文时,怎么引用文献? - 易智编译EaseEditing

首先需要清楚哪些引用必须注明[1]: 任何直接引用都要用引号并注明来源; 任何不是自己的口头或书面的观点、解释和结论都应注明来源; 即使不用原话,但是他人的思路、概念或观点也应注明; 不要为了适合你的观点修改原…

机器学习——无监督学习

机器学习的分类一般分为下面几种类别:监督学习( supervised Learning )无监督学习( Unsupervised Learning )强化学习( Reinforcement Learning,增强学习)半监督学习( Semi-supervised Learning )深度学习(Deep Learning)Python Scikit-learn. http: // …

day40|198.打家劫舍、213.打家劫舍II、337.打家劫舍III

198.打家劫舍 你是一个专业的小偷,计划偷窃沿街的房屋。每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警。 给定一个代表每个…

软件测试8

一 缺陷 软件缺陷:是指软件或程序中存在的各种问题及错误,会导致软件产品在某种程度上不能满足用户的需求 二 软件缺陷的判定标准 1.软件未达到需求规格说明书中表明的功能 2.软件出现了需求规格说明书不会出现错误的地方 3.软件的功能超出了需求规格…

14 nuxt3学习(布局 渲染模式 插件plugin 生命周期)

布局 布局是围绕包含多个页面的公共用户界面的页面的包装器,例如页眉和页脚显示。 布局是使用slot 组件显示页面内容的Vue文件。 默认情况下使用layouts/default.vue文件。 自定义布局可以设置为页面元数据的一部分。 方式一:默认布局 在layouts目录下…

Xmind快捷键大全

Xmind快捷键大全 1、常用 CtrlShiftL 快捷键助手CtrlHome 返回中心主题Enter 插入主题Tab 插入子主题F2 编辑主题F3 添加/编辑标签F4 添加/编辑备注F6 下钻ShiftF6 上钻Delete 删除Ctrl] 插入摘要CtrlI 插入图片CtrlShiftH 插入超链接Ctrl1,2,3,4,5,6快速添加优先等级图标Ctr…

applicationContext相关加载

spring refresh 概述 refresh是一个方法,spring中所有的ApplicationContext容器都需要通过refresh方法初始化; 处理步骤 其中refresh方法包含12个主要的处理步骤: 1、第1个步骤做前置准备 2、第2~6步骤创建BeanFactory(Appl…

Java中垃圾回收(GC)算法详解

咱们要进行垃圾回收,是不是要知道哪些对象是垃圾,然后针对这些垃圾要怎么回收呢?那本篇文章我们就将垃圾回收分为标记垃圾、清除垃圾两个阶段讲解,详细说明每个阶段都有那些算法。1、标记阶段算法在堆里存放着几乎所有的Java对象实…

2023年交通与智慧城市国际会议(ICoTSC 2023)

2023年交通与智慧城市国际会议(ICoTSC 2023) 重要信息 会议网址:www.icotsc.org 会议时间:2023年7月28-30日 召开地点:长沙 截稿时间:2023年6月15日 录用通知:投稿后2周内 收录检索:EI,Scopus 会议简介…

轻松玩转开源大语言模型bloom(一)

前言 chatgpt已经成为了当下热门,github首页的trending排行榜上天天都有它的相关项目,但背后隐藏的却是openai公司提供的api收费服务。作为一名开源爱好者,我非常不喜欢知识付费或者服务收费的理念,所以便有决心写下此系列&#…

【Flutter】入门Dart语言:操作符的基本用法

文章目录 一、前言二、常用的操作符1.算术操作符2.关系操作符3.逻辑操作符4.赋值操作符5.三元运算符三、总结一、前言 当我们在编写Flutter应用程序时,操作符是我们不可或缺的工具。它们是用于执行各种操作的关键字和符号,可以帮助我们简化代码并提高效率。熟练掌握各种类型…

Tomcat在linux环境中开机自启(定时重启)

一、Tomcat开启自启 我们经常会遇到服务器断电或异常,而异常后tomcat中部署的web项目需要我手动去启动。为此,特别贡献出Linux环境中Tomcat开机自启的方式供学习使用。 1. 添加JAVA_HOME并配置tomcat自启 vi /etc/rc.local 添加如下语句&…

ChIP-seq 分析:基因集富集(11)

动动发财的小手,点个赞吧! 1. 基因集检测 转录因子或表观遗传标记可能作用于按共同生物学特征(共享生物学功能、RNAseq 实验中的共同调控等)分组的特定基因组。 ChIPseq 分析中的一个常见步骤是测试常见基因集是否富含转录因子结合…

分布式新闻项目实战 - 13.项目部署_持续集成(Jenkins) ^_^ 完结啦 ~

欲买桂花同载酒,终不似,少年游。 系列文章目录 项目搭建App登录及网关App文章自媒体平台(博主后台)自媒体文章审核延迟任务kafka及文章上下架App端文章搜索后台系统管理Long类型精度丢失问题定时计算热点文章(xxl-Job…

eBay是不是一定要养号?是的

相信每个运营过eBay的用户遇到过这个棘手的问题,eBay个人账户的刊登数量是有限的,尤其是新账户只有5个sku,所以一开始的运营会比较艰难。想要快点走上正轨的话,就一定要去注重这个“养号”。eBay运营模式 1.拍卖 eBay最开始是一个…

Java的算数运算符、关系运算符、逻辑运算符、位运算符

JAVA的运算符,分为四类: 算数运算符、关系运算符、逻辑运算符、位运算符 章节一 算数运算符(7): 加()、减(-)、乘 (*)、除 (/)、 取余(%)、 加加()、 减减(–)、 章节二 赋值运算符 赋值()、加等()、减等(-)、乘等(*)、除等(/),取…

LeetCode·每日一题·1096. 花括号展开 II·DFS+HASH

作者:Guang链接:https://leetcode.cn/problems/brace-expansion-ii/solutions/997719/xss1096-hua-gua-hao-zhan-kai-iiby-zgh-by-vumf/来源:力扣(LeetCode)著作权归作者所有。商业转载请联系作者获得授权,…

项目管理软件中什么是依赖管理,具体有什么作用?

项目管理软件中的依赖管理有什么作用?没有项目任务是孤立存在的。除了第一个项目任务之外,每个任务或活动都以某种方式依赖于其他活动。无论是等待另一个任务的输出还是要释放资源,您都需要在任何项目中管理许多依赖项。依赖管理是管理所有这…

VUE3入门第二篇:安装pnpm

VUE介绍 VUE是一个使用JavaScript编写的框架,所以在开发的时候,我们可以使用Js的包管理工具进行安装/管理Js框架 pnpm介绍 一般情况下,对于我们都会使用npm进行管理,但是使用 npm 时,依赖每次被不同的项目使用&…

C++面向对象编程之一:封装

C面向对象编程三大特性为:封装,继承,多态。C认为万事万物皆为对象,对象有属性和行为。比如:游戏里的地图场景可以看作是长方形对象,属性场景id,有长,有宽,可能有NPC&…