React Hooks —— ref hooks
什么是Hooks
Hooks从语法上来说是一些函数。这些函数可以用于在函数组件中引入状态管理和生命周期方法。
React Hooks的优点
- 简洁
从语法上来说,写的代码少了 - 上手非常简单
- 基于函数式编程理念,只需要掌握一些JavaScript基础知识
- 与生命周期相关的知识不用学,react Hooks使用全新的理念来管理组件的运作过程
- 与HOC相关的知识不用学,React Hooks能够完美解决HOC想要解决的问题,并且更可靠
- Mobx取代了Redux做状态管理
- 代码复用性更好
- 与Typescript结合更简单
React Hooks的缺点
- 状态不同步
在异步操作的函数中访问的状态还是原来的状态的值 - useEffect依赖问题
当useEffect依赖的数据变多后会导致频繁触发
React Hooks的注意事项
- 命名规范
自定义Hooks的命名一律使用use作为前缀,形如:useXXX - 仅在最外层调用React Hooks
- 仅从react函数中调用react Hooks
在自定义Hooks或者组件中调用Hooks
ref hook
可以在函数式组件中存储/查找组件内的元素或其他数据
useRef
useRef(initialValue)返回一个可变的ref对象,该对象只有一个current属性,初始值为传入的参数initialValue,并且返回的ref对象在组件的整个生命周期内保持不变。
作用:
- 用来获取DOM节点的实例,与React.createRef()作用一样
- 存储渲染周期之间的共享数据
- 获取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>
}
- 存储共享数据
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> }
注意事项
- 组件的每次渲染,useRef的返回值都不变
- ref.current发生变化并不会造成重新渲染
- 不可以在render中更新ref.current的值,否则会导致ref.current的值计算错误
这是因为当其他的数据发生变化时,会导致重新渲染,这时ref.current会更新,这就导致计算错误。 - 元素属性的ref的值不能是useRef返回的对象以外的值
- 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的优点 简洁 从语法上来说,写的代码少了上手非常简单 基于函数式编程理念,只需要掌握一些JavaScript基础知识与生命周期相关的知识不…...
泛型与Gson解析
/*** 回调接口的一种实现* 用于把网络返回的json字符串转换成参数化类型* 泛型 T 就是用户输入的javaBean的类型*/ public abstract class HttpCallback<T> implements ICallback {Overridepublic void onSuccess (String result) {// result就是网络回来的数据// 把这个…...
c++使用ifstream和ofstream报错:不允许使用不完整的类型
学习《C Primer》关于IO库的部分,输入284页的的代码,出现了报错: 不允许使用不完整的类型 原来的代码: #include <iostream> #include <vector> using namespace std;int main(int argc, char **argv) {ifstream in…...
调试器通用波形显示工具
前言:事情起因是我们实验室买了个无线调试器是CMSIS-DAP的,无法使用J-SCOPE显示波形来方便调PID,所以我就在网上找到了个开源工具链接:http://t.csdnimg.cn/ZqZPY使用方法:工具是好工具,就是没有使用手册&a…...
Linux中getopt函数、optind等变量使用详解
getopt函数、optind等变量使用详解 最近在学习《Unix网络编程》vol2时,发现书中例子经常使用一个命令行解析getopt函数,因为函数声明比较特别,根据自己摸索,遂总结出使用方法。 1. getopt函数的声明 该函数是由Unix标准库提供的…...
RDP协议流程详解(二)Basic Settings Exchange 阶段
RDP连接建立过程,在Connection Initiation后,RDP客户端和服务端将进行双方基础配置信息交换,也就是basic settings exchange阶段。在此阶段,将包含两条消息Client MCS Connect Initial PDU和Server MCS Connect Response PDU&…...
实时人脸五观检测:基于libfacedetection(CNN模型)
一、前言 随着人工智能技术的不断发展,人脸检测已成为计算机视觉领域的重要应用之一。人脸检测是一种将输入图像中的人脸位置和轮廓提取出来的技术,广泛应用于人脸识别、智能监控、人机交互等领域。利用libfacedetection开源的人脸检测库,实现人脸检测。 libfacedetection…...
图像和视频上传平台Share Me
本文完成于 6 月,所以反代中,域名演示还是使用的 laosu.ml,不过版本并没有什么变化; 什么是 Share Me ? Share Me 是使用 Next.js 和 PocketBase 的自托管图像和视频上传平台,具有丰富的嵌入支持和 API&…...
JavaScript 在前端开发中有什么应用?
JavaScript(简称JS)是一种脚本语言,广泛应用于前端开发中。作为Web前端三大基石之一(HTML、CSS、JS),它可以使网页具备交互性、动态性和实时性,提高用户体验。在本文中,我将详细论述…...
【沐风老师】推荐2023年3DMAX的10个最佳插件!
推荐2023年3DMAX的10个最佳插件 3dMax是一款专业的三维建模、动画和渲染软件,供建筑师、工程师、游戏开发商和视觉效果艺术家使用。它提供了一系列用于建模、纹理、装配、动画和渲染3D对象和场景的工具。3ds Max包括粒子和流体模拟的高级功能,以及对各种…...
【visual studio 小技巧】项目属性->生成->事件
需求 我们有时会用到一些dll,需要把这些dll和我们生成的exe放到一起,一般我们是手动自己copy, 这样发布的时候,有时会忘记拷贝这个dll,导致程序运行出错。学会这个小技巧,就能实现自动copy,非…...
每日一题 279完全平方数(完全背包)
题目 完全平方数 给你一个整数 n ,返回 和为 n 的完全平方数的最少数量 。 完全平方数 是一个整数,其值等于另一个整数的平方;换句话说,其值等于一个整数自乘的积。例如,1、4、9 和 16 都是完全平方数,而…...
创意中秋与国庆贺卡 - 用代码为节日增添喜悦
目录 编辑 引言 贺卡的初始主题 - 中秋节 点击头像,切换至国庆主题 文本动画 用代码制作这个贺卡 获取完整代码(简单免费) 总结 引言 中秋佳节和国庆日是中国两个重要的传统节日,一个寓意团圆与祝福,另一个…...
专业综合课程设计 - 优阅书城项目(第一版)
此项目是《专业综合课程设计》带练项目 实现的功能有: 登录、注销、添加图书、删除图书、编辑图书 包含资源: 优阅书城(bookstore)源码 数据库数据 课程笔记 下载链接:https://wwpv.lanzoue.com/i79nx1av4doj 登录功…...
【剑指Offer】13.机器人的运动范围
题目 地上有一个 rows 行和 cols 列的方格。坐标从 [0,0] 到 [rows-1,cols-1] 。一个机器人从坐标 [0,0] 的格子开始移动,每一次只能向左,右,上,下四个方向移动一格,但是不能进入行坐标和列坐标的数位之和大于 thresh…...
【Qt基础篇】信号和槽
文章目录 一些常见的bug:字符集不对产生的错误VS平台中文乱码 QT的优点关于.pro文件QtCreator快捷键最简单的qt程序按钮的创建对象模型**Qt窗口坐标**体系信号和槽机制connect函数系统自带的信号和槽案例:实现点击按钮-关闭窗口的案例 自定义信号和槽案例…...
.netCore用DispatchProxy实现动态代理
在 .NET Core 中,你可以使用 DispatchProxy 类来实现动态代理。DispatchProxy 允许你在运行时创建一个代理对象,该代理对象可以拦截对其所代理的对象的方法调用,并在方法调用前后执行自定义的逻辑。这在 AOP(面向切面编程…...
好奇喵 | Tor浏览器——访问.onion网址,揭开Dark Web的神秘面纱
前言 在之前的博客中: 1.Surface Web —> Deep Web —> Dark Web,我们解释了表层网络、深层网络等的相关概念; 2.Tor浏览器——层层剥开洋葱,我们阐述了Tor的历史和基本工作原理; 3.Tor浏览器…...
Maven 中引用其他项目jar包出现BOOT-INF问题
问题 在B项目中引入A项目的类,但是发现怎么也引入不进来 A项目打包之后,想在B项目中引用jar 在B项目中发现类文件无法引用 参考网上进行清缓存等一系列操作都没有解决。 最后发现引用的jar包中包含BOOT-INF, 然后去A项目中查找ÿ…...
PHP框架面试题
目录 1、什么是PHP框架? 2、常见的PHP框架有哪些? 3、为什么要使用PHP框架? 4、什么是路由?PHP框架中的路由是如何实现的? 5.TP的特性有哪些? 6.laravel有那些特点? 7.TP框架和Laravel框架的区别 8.tp5和tp6区…...
【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad(Adaptive Gradient Algorithm)是一种自适应学习率的优化算法,由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率,适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成:MAC头部frame bodyFCS,其中MAC是固定格式的,frame body是可变长度。 MAC头部有frame control,duration,address1,address2,addre…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件,常用于在两个集合之间进行数据转移,如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model:绑定右侧列表的值&…...
Python爬虫(二):爬虫完整流程
爬虫完整流程详解(7大核心步骤实战技巧) 一、爬虫完整工作流程 以下是爬虫开发的完整流程,我将结合具体技术点和实战经验展开说明: 1. 目标分析与前期准备 网站技术分析: 使用浏览器开发者工具(F12&…...
04-初识css
一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...
WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)
一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解,适合用作学习或写简历项目背景说明。 🧠 一、概念简介:Solidity 合约开发 Solidity 是一种专门为 以太坊(Ethereum)平台编写智能合约的高级编…...
python报错No module named ‘tensorflow.keras‘
是由于不同版本的tensorflow下的keras所在的路径不同,结合所安装的tensorflow的目录结构修改from语句即可。 原语句: from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后: from tensorflow.python.keras.lay…...
Java毕业设计:WML信息查询与后端信息发布系统开发
JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发,实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构,服务器端使用Java Servlet处理请求,数据库采用MySQL存储信息࿰…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能
1. 开发环境准备 安装DevEco Studio 3.1: 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK 项目配置: // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...
windows系统MySQL安装文档
概览:本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容,为学习者提供全面的操作指导。关键要点包括: 解压 :下载完成后解压压缩包,得到MySQL 8.…...
