react hook: useRef

在组件顶层调用 useRef 以声明一个 ref
const ref = useRef(initialValue)
console.log(ref.current)
initialValue:ref 对象的 current 属性的初始值。可以是任意类型的值。这个参数在首次渲染后被忽略。
current 返回一个只有一个属性的对象, 初始值为传递的 initialValue。

可以修改 ref.current 属性。与 state 不同,它是可变的。然而,如果它持有一个用于渲染的对象(例如 state 的一部分),那么就不应该修改这个对象。

改变 ref.current 属性时,React 不会重新渲染组件。

useRef 可以保存 DOM 节点的引用

import { useRef } from 'react';function MyComponent() {const inputRef = useRef(null);// ...return <input ref={inputRef} />;function handleClick() {inputRef.current.focus();}

useRef 也可以保存任何可变的数据,而不用触发组件的重新渲染

// 可以记录定时器id实现防抖
function handleStartClick() {const intervalId = setInterval(() => {// ...}, 1000);intervalRef.current = intervalId;
}

useRef 也可以访问子组件的实例

父组件
import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {const childRef = useRef();const handleClick = () => {childRef.current.focusInput();};return (<div><ChildComponent ref={childRef} /><button onClick={handleClick}>Focus Input</button></div>);
};export default ParentComponent;子组件
import React, { forwardRef, useImperativeHandle, useRef } from 'react';const ChildComponent = forwardRef((props, ref) => {const inputRef = useRef(null);useImperativeHandle(ref, () => ({focusInput() {inputRef.current.focus();}}));return <input ref={inputRef} type="text" />;
});export default ChildComponent;

useRef 也可以useRef 来保存上一次的值,供下次渲染时进行比较或其他操作

不要在渲染期间写入或者读取 ref.current。

function MyComponent() {// ...// 🚩 不要在渲染期间写入 refmyRef.current = 123;// ...// 🚩 不要在渲染期间读取 refreturn <h1>{myOtherRef.current}</h1>;
}可以在 事件处理程序或者 Effect 中读取和写入 ref。
function MyComponent() {// ...useEffect(() => {// ✅ 可以在 Effect 中读取和写入 refmyRef.current = 123;});// ...function handleClick() {// ✅ 可以在事件处理程序中读取和写入 refdoSomething(myOtherRef.current);}// ...
}
如果不得不在渲染期间读取 或者写入,那么应该 使用 state 代替。

避免重复创建 ref 的内容

function Video() {const playerRef = useRef(new VideoPlayer());// ...
虽然 new VideoPlayer() 的结果只会在首次渲染时使用,但是依然在每次渲染时都在调用这个方法。如果是创建昂贵的对象,这可能是一种浪费。为了解决这个问题,你可以像这样初始化 ref:function Video() {const playerRef = useRef(null);if (playerRef.current === null) {playerRef.current = new VideoPlayer();}// ...

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

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

相关文章

RocketMQ发送和接收方式详解

RocketMQ有几种发送方式 RocketMQ 提供了几种不同的消息发送方式&#xff0c;以满足不同场景下的需求。这些发送方式主要包括&#xff1a;同步发送&#xff08;Synchronous&#xff09;&#xff1a;这是最常见的一种发送方式&#xff0c;客户端发送消息后&#xff0c;会等待服…

Python-GEE绘制DEM精美图片

目录 上传矢量和DEM获取添加颜色条参考文章 先连接上GEE的自己的项目 import ee import geemap geemap.set_proxy(port33210) ee.Authenticate() ee.Initialize(projecta-flyllf0313)上传矢量和DEM获取 使用Google Earth Engine&#xff08;GEE&#xff09;和Google Earth Eng…

基于单片机的模糊PID炉温控制系统设计

摘 要 电热炉是在工业热处理的生产中广泛使用的一种设备&#xff0c;电热炉的温度控制系统存在时变性&#xff0c;非线性&#xff0c;滞后性等特征&#xff0c;难以用常规PID的控制器对系统达到很好的控制效果。当控温精度的要求高时&#xff0c;使用传统的控制理论方法难以达…

亮相AWE 2024,日立中央空调打造定制空气新体验

日立中央空调于3月14日携旗下空气定制全新成果&#xff0c;亮相2024中国家电及消费电子博览会&#xff08;简称AWE 2024&#xff09;现场&#xff0c;围绕“科创先行 智引未来”这一主题&#xff0c;通过技术与产品向行业与消费者&#xff0c;展现自身对于家居空气的理解。 展会…

kanzi颜色工作流程

线性和非线性伽玛色彩空间 RGB 颜色空间的目的是表示在计算机显示器上显示的颜色。目前&#xff0c;sRGB是非线性伽玛色彩空间的标准。之所以需要它&#xff0c;是因为人类对光的感知是非线性的&#xff0c;而且计算机显示器对光强度具有非线性响应。 人眼比浅色更能区分深色…

Android 13 源码编译及报错修复

下载AOSP指定分支 repo init -u git://aosp../platform/manifest -b android-13.0.0_r83 同步代码到本地 repo sync -c 初始化编译环境, 选择构建目标 source build/envsetup.sh lunch 选择需要构建的目标&#xff0c;此处以aosp_arm64-eng为例 进行固件编译 make -j12 期间编译…

力扣热门算法题 49. 字母异位词分组,50. Pow(x, n),51. N 皇后

49. 字母异位词分组&#xff0c;50. Pow(x, n)&#xff0c;51. N 皇后&#xff0c;每题做详细思路梳理&#xff0c;配套Python&Java双语代码&#xff0c; 2024.03.19 可通过leetcode所有测试用例。 目录 49. 字母异位词分组 解题思路 完整代码 python Java 50. Pow(x…

接口测试工具:Postman详解

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 Postman 是一款功能强大的 API 开发和测试工具&#xff0c;以下…

【JDK原理】类加载约束条件

JVM简介 JVM&#xff08;Java虚拟机&#xff09;是Java程序的运行环境&#xff0c;它负责将Java字节码加载到内存中并执行。在JVM中&#xff0c;类加载是一个重要的过程&#xff0c;它负责将类的字节码加载到内存中&#xff0c;并对类进行验证、准备和解析&#xff0c;最终生成…

STM32F411 Micropython使用日记

1、开发板购买&#xff1a;推荐淘宝“无名科技Nologo” 19.8包邮到手&#xff1b;买开发板还需要买SPI NorFlash&#xff0c;推荐8MB的flash&#xff0c;不懂的可以问卖家&#xff0c;买回来需要焊接好&#xff0c;也可以找店家试试看能不能帮忙焊接&#xff0c;不然micropytho…

Java中加减乘除运算工具类

Java 中的 double 类型不能用于精确的加减乘除运算&#xff0c;这是因为计算机使用二进制来表示浮点数&#xff0c;而二进制无法精确表示所有十进制数。 原因&#xff1a; 浮点数由两部分组成&#xff1a;指数和尾数。指数表示浮点数的大小&#xff0c;尾数表示浮点数的精度。…

八节【DBA从入门到实践】课程,带你快速掌握OceanBase运维管理核心技能

为帮助用户及开发者更好、更快地掌握OceanBase DBA核心技能&#xff0c;OceanBase社区设计了配套教程——“DBA从入门到实践”。8期教程带大家循序渐进掌握OceanBase运维管理核心技能。搭配随堂习题和OceanBase技术专家在线答疑&#xff0c;快速掌握重要知识点&#xff0c;并轻…

【DL经典回顾】激活函数大汇总(二十七)(Bent Identity附代码和详细公式)

激活函数大汇总&#xff08;二十七&#xff09;&#xff08;Bent Identity附代码和详细公式&#xff09; 更多激活函数见激活函数大汇总列表 一、引言 欢迎来到我们深入探索神经网络核心组成部分——激活函数的系列博客。在人工智能的世界里&#xff0c;激活函数扮演着不可或…

直观与交互:山海鲸可视化软件与Excel传统表格的对比

作为一名长期使用Excel进行数据处理和分析的用户&#xff0c;最近我尝试了一款名为山海鲸的可视化软件&#xff0c;发现它与Excel传统表格之间存在诸多明显的差异。接下来&#xff0c;我将从个人体验视角出发&#xff0c;谈谈这两种工具的不同之处。 首先&#xff0c;从数据呈…

汇编语言和IBM的关系

一 缺乏汇编的硬件没有灵魂 1964年&#xff0c;在IBM没有发明System 360大型计算机之前&#xff0c;IBM已经发明了很多计算机。如IBM 1952年发布的第一台商用计算机&#xff1a;701计算机。1959年&#xff0c;IBM首次利用晶体管、磁芯存储器、印刷电路技术&#xff0c;发明了小…

家谱系统的app的主要功能介绍

家谱系统的app通常具备一系列功能&#xff0c;这些功能旨在帮助用户更好地记录、管理和分享家族的历史和文化。以下是一些常见的家谱系统app的功能介绍&#xff1a; 家谱查看&#xff1a;用户可以通过app登录自己的账号&#xff0c;查看对应的家谱信息。这包括家族成员的基本信…

组件化开发

一、引言 Vue.js 的组件化开发是其核心特性之一&#xff0c;它允许开发者将复杂的界面拆分为可复用的、独立的、小的组件&#xff0c;从而提高开发效率和代码的可维护性。 二、关键点 1.组件的定义 在components下创建.vue文件timecard.vue用来编辑内容。 文件创建完毕后&am…

Linux Shell中的echo命令详解

Linux Shell中的echo命令详解 在Linux Shell中&#xff0c;echo命令是一个常用的内置命令&#xff0c;用于在终端上显示文本或字符串。它主要用于显示变量的值&#xff0c;创建文件的内容&#xff0c;或者简单地输出一些信息。在本文中&#xff0c;我们将详细探讨echo命令的用…

迷宫问题(c++题解)

题目描述 设有一个 N*N(2<N<10)方格的迷宫&#xff0c;入口和出口分别在左上角和右上角。迷宫格子中 分别放 0 和 1&#xff0c;0 表示可通&#xff0c;1 表示不能&#xff0c;入口和出口处肯定是 0。迷宫走的规则如下所示&#xff1a; 即从某点开始&#xff0c;有八个方…

000_【基础篇】SpringBoot概述

介绍 springboot 是 spring 提供的一个子项目&#xff0c;用于快速构建 spring 应用程序 传统的 SSM 框架要导入很多依赖的 jar 包以及配置很多的配置文件&#xff0c;麻烦、繁琐 springboot 特性 springboot 主要&#xff08;还有其他的一些特性&#xff09;有起步依赖和…