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

React Hooks —— ref hooks

什么是Hooks

Hooks从语法上来说是一些函数。这些函数可以用于在函数组件中引入状态管理和生命周期方法。

React Hooks的优点

  1. 简洁
    从语法上来说,写的代码少了
  2. 上手非常简单
    • 基于函数式编程理念,只需要掌握一些JavaScript基础知识
    • 与生命周期相关的知识不用学,react Hooks使用全新的理念来管理组件的运作过程
    • 与HOC相关的知识不用学,React Hooks能够完美解决HOC想要解决的问题,并且更可靠
    • Mobx取代了Redux做状态管理
  3. 代码复用性更好
  4. 与Typescript结合更简单

React Hooks的缺点

  1. 状态不同步
    在异步操作的函数中访问的状态还是原来的状态的值
  2. useEffect依赖问题
    当useEffect依赖的数据变多后会导致频繁触发

React Hooks的注意事项

  1. 命名规范
    自定义Hooks的命名一律使用use作为前缀,形如:useXXX
  2. 仅在最外层调用React Hooks
  3. 仅从react函数中调用react Hooks
    在自定义Hooks或者组件中调用Hooks

ref hook

可以在函数式组件中存储/查找组件内的元素或其他数据

useRef

useRef(initialValue)返回一个可变的ref对象,该对象只有一个current属性,初始值为传入的参数initialValue,并且返回的ref对象在组件的整个生命周期内保持不变。

作用:

  • 用来获取DOM节点的实例,与React.createRef()作用一样
  • 存储渲染周期之间的共享数据
  1. 获取DOM节点的实例
import {useRef} from 'react'
function APP(){const userRef = useRef(null);const clickButton = ()=>{if(userRef.current){console.log(userRef.current);}}return <div><input name="username" ref={userRef} /><button onClick={clickButton}>show</button></div>
}
  1. 存储共享数据
    import {useRef,useState} from 'react'
    function APP(){const [count,setCount] = useState(0);const countRef = useRef(null);const preCount = countRef.current;useEffect(()=>{countRef.current = count;});const clickButton = ()=>{setCount(count+1);}return <div><input name="username" /><button onClick={clickButton}>show</button></div>
    }
    
注意事项
  1. 组件的每次渲染,useRef的返回值都不变
  2. ref.current发生变化并不会造成重新渲染
  3. 不可以在render中更新ref.current的值,否则会导致ref.current的值计算错误
    这是因为当其他的数据发生变化时,会导致重新渲染,这时ref.current会更新,这就导致计算错误。
  4. 元素属性的ref的值不能是useRef返回的对象以外的值
  5. ref.current的值发生变化不会触发useEffect
forwardRef

当ref作用在一个函数式组件上时不会获取到组件实例。因此需要使用forwardRef。

forwardRef会创建一个React组件,这个组件能够将其接收的ref属性转发到自己的组件树。

forwardRef()的用法是包裹一个组件。

import {forwardRef,useRef,useEffect} from 'react'
const Child = forwardRef((props,ref)=>{return <input ref={ref} type="text" />
});
function App(){const childRef = useRef(null);useEffect(()=>{childRef.current.focus();});return <><Child ref={childRef}></Child></>
}
useImperativeHandle

useImperativeHandle允许组件自定义需要暴露的ref数据,是为了解决useRef获取到组件的所有属性和方法的问题。

useImperativeHandle(ref,handle,[deps]):

  • ref:需要暴露的ref引用
  • handle:是一个函数,返回值会作为ref.current的值
  • deps:依赖数据,需要监听的状态
import {useRef,useImperativeHandle,forwardRef} from 'react'
const Child = forwardRef((props,ref){useImperativeHandle(ref,()=>{return {focus:()=>ref.current.focus()}},[props.value]);retunr <input ref={ref} value={props.value} />
});
function App(){const childRef = useRef(null);return <><Child ref={childRef}></Child></>
}
注意事项
  • useImperativeHandle和React.forwardRef必须配合使用,否则在运行的时候会直接报错。
  • 使用useImperativeHandle后,可以让父、子组件分别有自己的ref,通过React.forwardRef将父组件的ref传递过来,通过useImperativeHandle方法来自定义开放给父组件的current。

相关文章:

React Hooks —— ref hooks

什么是Hooks Hooks从语法上来说是一些函数。这些函数可以用于在函数组件中引入状态管理和生命周期方法。 React Hooks的优点 简洁 从语法上来说&#xff0c;写的代码少了上手非常简单 基于函数式编程理念&#xff0c;只需要掌握一些JavaScript基础知识与生命周期相关的知识不…...

泛型与Gson解析

/*** 回调接口的一种实现* 用于把网络返回的json字符串转换成参数化类型* 泛型 T 就是用户输入的javaBean的类型*/ public abstract class HttpCallback<T> implements ICallback {Overridepublic void onSuccess (String result) {// result就是网络回来的数据// 把这个…...

c++使用ifstream和ofstream报错:不允许使用不完整的类型

学习《C Primer》关于IO库的部分&#xff0c;输入284页的的代码&#xff0c;出现了报错&#xff1a; 不允许使用不完整的类型 原来的代码&#xff1a; #include <iostream> #include <vector> using namespace std;int main(int argc, char **argv) {ifstream in…...

调试器通用波形显示工具

前言&#xff1a;事情起因是我们实验室买了个无线调试器是CMSIS-DAP的&#xff0c;无法使用J-SCOPE显示波形来方便调PID&#xff0c;所以我就在网上找到了个开源工具链接&#xff1a;http://t.csdnimg.cn/ZqZPY使用方法&#xff1a;工具是好工具&#xff0c;就是没有使用手册&a…...

Linux中getopt函数、optind等变量使用详解

getopt函数、optind等变量使用详解 最近在学习《Unix网络编程》vol2时&#xff0c;发现书中例子经常使用一个命令行解析getopt函数&#xff0c;因为函数声明比较特别&#xff0c;根据自己摸索&#xff0c;遂总结出使用方法。 1. getopt函数的声明 该函数是由Unix标准库提供的…...

RDP协议流程详解(二)Basic Settings Exchange 阶段

RDP连接建立过程&#xff0c;在Connection Initiation后&#xff0c;RDP客户端和服务端将进行双方基础配置信息交换&#xff0c;也就是basic settings exchange阶段。在此阶段&#xff0c;将包含两条消息Client MCS Connect Initial PDU和Server MCS Connect Response PDU&…...

实时人脸五观检测:基于libfacedetection(CNN模型)

一、前言 随着人工智能技术的不断发展,人脸检测已成为计算机视觉领域的重要应用之一。人脸检测是一种将输入图像中的人脸位置和轮廓提取出来的技术,广泛应用于人脸识别、智能监控、人机交互等领域。利用libfacedetection开源的人脸检测库,实现人脸检测。 libfacedetection…...

图像和视频上传平台Share Me

本文完成于 6 月&#xff0c;所以反代中&#xff0c;域名演示还是使用的 laosu.ml&#xff0c;不过版本并没有什么变化&#xff1b; 什么是 Share Me &#xff1f; Share Me 是使用 Next.js 和 PocketBase 的自托管图像和视频上传平台&#xff0c;具有丰富的嵌入支持和 API&…...

JavaScript 在前端开发中有什么应用?

JavaScript&#xff08;简称JS&#xff09;是一种脚本语言&#xff0c;广泛应用于前端开发中。作为Web前端三大基石之一&#xff08;HTML、CSS、JS&#xff09;&#xff0c;它可以使网页具备交互性、动态性和实时性&#xff0c;提高用户体验。在本文中&#xff0c;我将详细论述…...

【沐风老师】推荐2023年3DMAX的10个最佳插件!

推荐2023年3DMAX的10个最佳插件 3dMax是一款专业的三维建模、动画和渲染软件&#xff0c;供建筑师、工程师、游戏开发商和视觉效果艺术家使用。它提供了一系列用于建模、纹理、装配、动画和渲染3D对象和场景的工具。3ds Max包括粒子和流体模拟的高级功能&#xff0c;以及对各种…...

【visual studio 小技巧】项目属性->生成->事件

需求 我们有时会用到一些dll&#xff0c;需要把这些dll和我们生成的exe放到一起&#xff0c;一般我们是手动自己copy&#xff0c; 这样发布的时候&#xff0c;有时会忘记拷贝这个dll&#xff0c;导致程序运行出错。学会这个小技巧&#xff0c;就能实现自动copy&#xff0c;非…...

每日一题 279完全平方数(完全背包)

题目 完全平方数 给你一个整数 n &#xff0c;返回 和为 n 的完全平方数的最少数量 。 完全平方数 是一个整数&#xff0c;其值等于另一个整数的平方&#xff1b;换句话说&#xff0c;其值等于一个整数自乘的积。例如&#xff0c;1、4、9 和 16 都是完全平方数&#xff0c;而…...

创意中秋与国庆贺卡 - 用代码为节日增添喜悦

目录 ​编辑 引言 贺卡的初始主题 - 中秋节 点击头像&#xff0c;切换至国庆主题 文本动画 用代码制作这个贺卡 获取完整代码&#xff08;简单免费&#xff09; 总结 引言 中秋佳节和国庆日是中国两个重要的传统节日&#xff0c;一个寓意团圆与祝福&#xff0c;另一个…...

专业综合课程设计 - 优阅书城项目(第一版)

此项目是《专业综合课程设计》带练项目 实现的功能有&#xff1a; 登录、注销、添加图书、删除图书、编辑图书 包含资源&#xff1a; 优阅书城&#xff08;bookstore&#xff09;源码 数据库数据 课程笔记 下载链接&#xff1a;https://wwpv.lanzoue.com/i79nx1av4doj 登录功…...

【剑指Offer】13.机器人的运动范围

题目 地上有一个 rows 行和 cols 列的方格。坐标从 [0,0] 到 [rows-1,cols-1] 。一个机器人从坐标 [0,0] 的格子开始移动&#xff0c;每一次只能向左&#xff0c;右&#xff0c;上&#xff0c;下四个方向移动一格&#xff0c;但是不能进入行坐标和列坐标的数位之和大于 thresh…...

【Qt基础篇】信号和槽

文章目录 一些常见的bug&#xff1a;字符集不对产生的错误VS平台中文乱码 QT的优点关于.pro文件QtCreator快捷键最简单的qt程序按钮的创建对象模型**Qt窗口坐标**体系信号和槽机制connect函数系统自带的信号和槽案例&#xff1a;实现点击按钮-关闭窗口的案例 自定义信号和槽案例…...

.netCore用DispatchProxy实现动态代理

在 .NET Core 中&#xff0c;你可以使用 DispatchProxy 类来实现动态代理。DispatchProxy 允许你在运行时创建一个代理对象&#xff0c;该代理对象可以拦截对其所代理的对象的方法调用&#xff0c;并在方法调用前后执行自定义的逻辑。这在 AOP&#xff08;面向切面编程&#xf…...

好奇喵 | Tor浏览器——访问.onion网址,揭开Dark Web的神秘面纱

前言 在之前的博客中&#xff1a; 1.Surface Web —&#xff1e; Deep Web —&#xff1e; Dark Web&#xff0c;我们解释了表层网络、深层网络等的相关概念&#xff1b; 2.Tor浏览器——层层剥开洋葱&#xff0c;我们阐述了Tor的历史和基本工作原理&#xff1b; 3.Tor浏览器…...

Maven 中引用其他项目jar包出现BOOT-INF问题

问题 在B项目中引入A项目的类&#xff0c;但是发现怎么也引入不进来 A项目打包之后&#xff0c;想在B项目中引用jar 在B项目中发现类文件无法引用 参考网上进行清缓存等一系列操作都没有解决。 最后发现引用的jar包中包含BOOT-INF&#xff0c; 然后去A项目中查找&#xff…...

PHP框架面试题

目录 1、什么是PHP框架&#xff1f; 2、常见的PHP框架有哪些&#xff1f; 3、为什么要使用PHP框架&#xff1f; 4、什么是路由&#xff1f;PHP框架中的路由是如何实现的&#xff1f; 5.TP的特性有哪些? 6.laravel有那些特点? 7.TP框架和Laravel框架的区别 8.tp5和tp6区…...

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

C# SqlSugar:依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

门静脉高压——表现

一、门静脉高压表现 00:01 1. 门静脉构成 00:13 组成结构&#xff1a;由肠系膜上静脉和脾静脉汇合构成&#xff0c;是肝脏血液供应的主要来源。淤血后果&#xff1a;门静脉淤血会同时导致脾静脉和肠系膜上静脉淤血&#xff0c;引发后续系列症状。 2. 脾大和脾功能亢进 00:46 …...