当前位置: 首页 > news >正文

react:React Hook函数

使用规则

只能在组件中或者其他自定义的Hook函数中调用

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

基础Hook 函数

useState

useState是一个hook函数,它允许我们向组件中添加一个状态变量,从而控制影响组件的渲染结果

示例1

function App() {// 创建一个状态变量// count: 状态变量,setCount: 更新状态变量的函数const [count, setCount] = useState(0)return (<div><p>当前数值是:{count}</p><button onClick={() => setCount(count + 1)}>加一</button></div>)
}

在这里插入图片描述

示例2

function App() {const [userName, setUserName] = useState("111");return (<div><inputtype="text"value={userName}placeholder="请输入"onChange={(e) => setUserName(e.target.value)}/><div>当前输入值是:{userName}</div></div>);
}

在这里插入图片描述

注意:

  • react中,状态被认为是只读的,直接修改状态不能引发视图的更新
  • 对于对象类型的状态变量,应该始终传给set方法一个全新的对象来进行修改
function App() {const [form, setForm] = useState({age: 0})return (<div><p>当前年龄是:{form.age}</p><button onClick={() => setForm({...form,age: form.age + 1})}>加一</button></div>)
}

useRef

获取、操作DOM

function App() {// 使用 useRef生成ref对象,并绑定到dom上const inputRef = useRef(null);// 获取domconst getDom = () => {console.log(inputRef.current);};return (<div><input type="text" ref={inputRef} placeholder="请输入" /><button onClick={getDom}>获取dom</button></div>);
}

在这里插入图片描述

useEffect

useEffect是一个React Hook函数,用于在React组件中创建不是由事件引起而是由渲染本身引起的操作,比如发送AJAX请求、更改DOM

function App() {const [content, setContent] = useState("");const [note, setNote] = useState("");useEffect(() => {// 获取每日英语function getEnglish() {fetch("https://api.oioweb.cn/api/common/OneDayEnglish").then((res) => res.json()).then((data) => {console.log(data);setContent(data.result.content);setNote(data.result.note);});}getEnglish();}, []);return (<div><div>英文:{content}</div><div>翻译:{note}</div></div>);
}

在这里插入图片描述

不同依赖项说明

  • 没有依赖项,组件初始渲染+组件更新时执行
  • 空数组依赖,只在初始渲染时执行一次
  • 添加特定依赖项,组件初始渲染+特性依赖项变化时执行

没有依赖项

function App() {const [content, setContent] = useState(0);useEffect(() => {console.log("副作用执行了");});return (<div><button onClick={() => setContent(content + 1)}>{content}</button></div>);
}

空数组依赖

function App() {const [content, setContent] = useState(0);useEffect(() => {console.log("副作用执行了");}, []);return (<div><button onClick={() => setContent(content + 1)}>{content}</button></div>);
}

特性依赖变化

function App() {const [content, setContent] = useState(0);useEffect(() => {console.log("副作用执行了");}, [content]);return (<div><button onClick={() => setContent(content + 1)}>{content}</button></div>);
}

清除副作用

useEffect中编写的由渲染本身引起的对接组件外部的操作, 社区也叫做副作用操作,比如在useEffect中开启了一个定时器,我们想在组件卸载时把这个定时器再清理掉,这个过程就是清除副作用。

useEffect(() => {console.log("副作用执行了");return () => {console.log("清除副作用");};
}, []);

清除副作用的函数最常见的执行时机是在组件卸载时自动执行。

function App() {const [show, setShow] = useState(true);return (<div>父组件<button onClick={() => setShow(false)}>卸载Son组件</button>{show && <Son />}</div>);
}
function Son() {const [currentDate, setCurrentDate] = useState("");useEffect(() => {const timer = setInterval(() => {const newDate = new Date().toLocaleTimeString();setCurrentDate(newDate);console.log("当前时间:", newDate);}, 1000);return () => {// 不清除副作用,即使组件不适用了,定时器还会执行clearInterval(timer);};}, []);return (<div><div>子组件</div><div>当前时间是:{currentDate}</div></div>);
}

在这里插入图片描述

自定义Hook

自定义Hook是以use打头的函数,通过自定义Hook函数可以用来实现逻辑的封装和复用

function App() {const [state, toggle] = useToggle()return (<div>{ state && <div>这是一个div</div> }<button onClick={toggle}>切换</button></div>)
}function useToggle(){// 可复用的逻辑代码const [state, setState] = useState(true)const toggle = () => {setState(!state)}// 那些状态和方法需要在其他组件中使用,则返回return [state, toggle]
}

在这里插入图片描述

通用思路

  • 声明一个以use大头的函数
  • 在函数体内封装可以复用的逻辑
  • 将组件中用的的状态或者回调函数return出去(对象或者数组形式)
  • 在那个组件中用到这个逻辑,就执行这个函数,结构出来状态和回调进行使用
function App() {const [content, note] = useOneDayEnglish();return (<div><div>英文:{content}</div><div>翻译:{note}</div></div>);
}function useOneDayEnglish() {const [content, setContent] = useState("");const [note, setNote] = useState("");useEffect(() => {// 获取每日英语function getEnglish() {fetch("https://api.oioweb.cn/api/common/OneDayEnglish").then((res) => res.json()).then((data) => {console.log(data);setContent(data.result.content);setNote(data.result.note);});}getEnglish();}, []);return [content, note];
}

在这里插入图片描述

相关文章:

react:React Hook函数

使用规则 只能在组件中或者其他自定义的Hook函数中调用 只能在组件的顶层调用&#xff0c;不能嵌套在if、for、 其他函数中 基础Hook 函数 useState useState是一个hook函数&#xff0c;它允许我们向组件中添加一个状态变量&#xff0c;从而控制影响组件的渲染结果 示例1…...

算法学习2

学习目录 一.插入排序 一.插入排序 从数组的第一个元素开始&#xff0c;当前元素与其前一个元素进行比较&#xff1b; 大于&#xff08;或小于时&#xff09;将其进行交换&#xff0c;即当前元素替换到前一位&#xff1b; 再将该元素与替换后位置的前一个元素进行交换&#xf…...

vue循环渲染动态展示内容案例(“更多”按钮功能)

当我们在网页浏览时&#xff0c;常常会有以下情况&#xff1a;要展示的内容太多&#xff0c;但展示空间有限&#xff0c;比如我们要在页面的一部分空间中展示较多的内容放不下&#xff0c;通常会有两种解决方式&#xff1a;分页&#xff0c;“更多”按钮。 今天我们的案例用于…...

好用的工具网址

代码类&#xff1a; 1,json解析&#xff1a;JSON在线解析及格式化验证 - JSON.cn 2.传参转化编码 在线url网址编码、解码器-BeJSON.com 日常&#xff1a; 1.莆田医院查询&#xff1a;滚蛋吧&#xff01;莆田系...

【Temporal】方法规范

在workflow或者childWorkflow的方法代码中&#xff0c;不能使用golang的一些库方法&#xff0c;比如sleep&#xff0c;go协程等&#xff0c;必须使用其对应的封装方法&#xff0c;比如对应关系如下&#xff1a; time.Sleep -> workflow.Sleepgo xx -> workflow.Go(xx) 这…...

Python实现图形学曲线和曲面的Bezier曲线算法

目录 使用Python实现图形学曲线和曲面的Bezier曲线算法引言Bezier曲线的数学原理1. Bezier曲线定义2. Bezier曲线的递归形式 Python实现Bezier曲线算法1. 代码实现 代码详解使用示例Bezier曲线的特点Bezier曲面的扩展Bezier曲面类实现 总结 使用Python实现图形学曲线和曲面的Be…...

Unity数据持久化4——2进制

概述 基础知识 各类型数据转字节数据 文件操作相关 文件相关 文件流相关 文件夹相关 练习题 using System; using System.Collections; using System.Collections.Generic; using System.IO; using System.Text; using UnityEngine;public class Exercises1 : MonoBehaviour {/…...

经典sql题(八)SQL 查询详细指南总结一

SQL 查询详细指南 SQL&#xff08;Structured Query Language&#xff09;是一种用于管理和操作关系数据库的标准语言。本文将详细介绍 SQL 中的一些常见操作及其用法&#xff0c;包括 DISTINCT 去重、LIMIT 限制、排序、开窗函数、NULL 值替换、JOIN 与 UNION 等。 1. DISTI…...

用Python实现时间序列模型实战——Day 30: 学习总结与未来规划

在第30天&#xff0c;我们将对整个学习过程进行总结&#xff0c;复习关键知识点&#xff0c;并展望未来的学习与应用方向。我们将涵盖时间序列分析过程中涉及的主要模型、技术和工具&#xff0c;总结它们的优势和应用场景。此外&#xff0c;规划未来如何进一步深入学习&#xf…...

ChatGPT居然主动勾引用户,OpenAI又测试新功能? 一文教你学会订阅

有网友表示&#xff0c;他收到了ChatGPT主动给他发送的消息&#xff0c;询问“你高中的第一周过得怎么样&#xff1f;还适应吗&#xff1f;” 他很懵逼的回了一句“你刚才是给我发消息吗&#xff1f;”。也就是说&#xff0c;在没有任何先前文本提示下&#xff0c;ChatGPT主动…...

基于SpringBoot+Vue的考研百科网站系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 精品专栏&#xff1a;Java精选实战项目源码、Python精…...

深度之眼(三十)——pytorch(一)--深入浅出pytorch(附安装流程)

文章目录 一、前言一、pytoch二、六个部分三、如何学习四、学习路径&#xff08;重要)五、安装pytorch5.1 坑15.2 坑2 一、前言 我看了下目录 第一章和第二章都是本科学的数字图像处理。 也就是这一专栏&#xff1a;数字图像实验。 所以就不准备学习前两章了&#xff0c;直接…...

麒麟银河桌面版,成功安装cuda12.6,mysql

一、 要卸载并禁用 nouveau 驱动程序&#xff0c;可以按照以下步骤进行&#xff1a; 1. 确认 nouveau 驱动的当前状态&#xff1a; 首先&#xff0c;你可以使用以下命令查看 nouveau 驱动是否正在运行&#xff1a; lsmod | grep nouveau如果有输出&#xff0c;说明 nouveau …...

CentOS 7 YUM源不可用

CentOS 7 操作系统在2024年6月30日后将停止官方维护&#xff0c;并且官方提供的YUM源将不再可用。 修改&#xff1a;nano /etc/yum.repos.d/CentOS-Base.repo # CentOS-Base.repo [base] nameCentOS-$releasever - Base baseurlhttp://mirrors.aliyun.com/centos/$rel…...

Java反序列化利用链篇 | URLDNS链

文章目录 URLDNS链调用链分析Payload编写 系列篇其他文章&#xff0c;推荐顺序观看~ Java反序列化利用链篇 | JdbcRowSetImpl利用链分析Java反序列化利用链篇 | CC1链_全网最菜的分析思路Java反序列化利用链篇 | CC1链的第二种方式-LazyMap版调用链Java反序列化利用链篇 | URLD…...

Android 短信验证码自动填充

本文主要介绍国外google上线的app 短信自动填充方案。 本方案主要是使用google提出的&#xff0c;防止开发者使用SMS相关权限造成的用户信息泄露 目录 注意点&#xff1a; 1、本方式不适合华为手机&#xff0c;华为有自己的获取方式 2、本方式不需要添加任何短信权限 3、…...

数据库 MySQL 是否需要容器化?

容器的定义&#xff1a;容器是为了解决“在切换运行环境时&#xff0c;如何保证软件能够正常运行”这一问题。 目前&#xff0c;容器和 Docker 依旧是技术领域最热门的词语&#xff0c;无状态的服务容器化已经是大势所趋&#xff0c;同时也带来了一个热点问题被大家所争论不以…...

Kettle的安装及简单使用

Kettle的安装及简单使用一、kettle概述二、kettle安装部署和使用Windows下安装案例1&#xff1a;MySQL to MySQL案例2&#xff1a;使用作业执行上述转换&#xff0c;并且额外在表stu2中添加一条数据案例3&#xff1a;将hive表的数据输出到hdfs案例4&#xff1a;读取hdfs文件并将…...

Golang | Leetcode Golang题解之第420题强密码检验器

题目&#xff1a; 题解&#xff1a; func strongPasswordChecker(password string) int {hasLower, hasUpper, hasDigit : 0, 0, 0for _, ch : range password {if unicode.IsLower(ch) {hasLower 1} else if unicode.IsUpper(ch) {hasUpper 1} else if unicode.IsDigit(ch)…...

面试金典题3

URL化。编写一种方法&#xff0c;将字符串中的空格全部替换为%20。假定该字符串尾部有足够的空间存放新增字符&#xff0c;并且知道字符串的“真实”长度。 示例 1&#xff1a; 输入&#xff1a;"Mr John Smith ", 13 输出&#xff1a;"Mr%20John%20Smith&…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

linux 错误码总结

1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分,它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构: use strict;/…...

Qt 事件处理中 return 的深入解析

Qt 事件处理中 return 的深入解析 在 Qt 事件处理中&#xff0c;return 语句的使用是另一个关键概念&#xff0c;它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别&#xff1a;不同层级的事件处理 方…...

springboot 日志类切面,接口成功记录日志,失败不记录

springboot 日志类切面&#xff0c;接口成功记录日志&#xff0c;失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

【Veristand】Veristand环境安装教程-Linux RT / Windows

首先声明&#xff0c;此教程是针对Simulink编译模型并导入Veristand中编写的&#xff0c;同时需要注意的是老用户编译可能用的是Veristand Model Framework&#xff0c;那个是历史版本&#xff0c;且NI不会再维护&#xff0c;新版本编译支持为VeriStand Model Generation Suppo…...

如何配置一个sql server使得其它用户可以通过excel odbc获取数据

要让其他用户通过 Excel 使用 ODBC 连接到 SQL Server 获取数据&#xff0c;你需要完成以下配置步骤&#xff1a; ✅ 一、在 SQL Server 端配置&#xff08;服务器设置&#xff09; 1. 启用 TCP/IP 协议 打开 “SQL Server 配置管理器”。导航到&#xff1a;SQL Server 网络配…...