React 之 使用 ref 引用值(七)

当你希望组件“记住”某些信息,但又不想让这些信息 触发新的渲染 时,你可以使用 ref 。

//通过从 React 导入 useRef Hook 来为你的组件添加一个 ref
import { useRef } from 'react';export default function Counter() {//在组件内,调用 useRef Hook 并传入初始值作为唯一参数。//这里的 ref 指向一个数字,但是,像 state 一样,你可以让它指向任何东西:字符串、对象,甚至是函数。//与 state 一样,React 会在每次重新渲染之间保留 ref。但是,设置 state 会重新渲染组件,更改 ref 不会!let ref = useRef(0);//useRef 返回一个这样的对象://{ //current: 0 // 你向 useRef 传入的值//}function handleClick() {ref.current = ref.current + 1;alert('你点击了 ' + ref.current + ' 次!');}return (<button onClick={handleClick}>点击我!</button>);
}

ref 和 state 的不同之处

refstate
useRef(initialValue)返回 { current: initialValue }useState(initialValue) 返回 state 变量的当前值和一个 state 设置函数 ( [value, setValue])
更改时不会触发重新渲染更改时触发重新渲染。
可变 —— 你可以在渲染过程之外修改和更新 current 的值。“不可变” —— 你必须使用 state 设置函数来修改 state 变量,从而排队重新渲染。
你不应在渲染期间读取(或写入) current 值。你可以随时读取 state。但是,每次渲染都有自己不变的 state 快照。

何时使用 ref

通常,当你的组件需要“跳出” React 并与外部 API 通信时,你会用到 ref —— 通常是不会影响组件外观的浏览器
API。以下是这些罕见情况中的几个:

  • 存储 timeout ID
  • 存储和操作 DOM 元素,我们将在 下一页 中介绍
  • 存储不需要被用来计算 JSX 的其他对象。

如果你的组件需要存储一些值,但不影响渲染逻辑,请选择 ref。

ref 和 DOM

你可以将 ref 指向任何值。但是,ref 最常见的用法是访问 DOM 元素。列如下面的例子:

import { useRef } from 'react';export default function Form() {//使用 useRef Hook 声明 inputRefconst inputRef = useRef(null);function handleClick() {//从 inputRef.current 读取 input DOM 节点并使用 inputRef.current.focus() 调用它的 focus()。inputRef.current.focus();}return (<><input ref={inputRef} />  //这告诉 React 将这个 <input> 的 DOM 节点放inputRef.current。<button onClick={handleClick}>  //用 onClick 将 handleClick 事件处理器传递给 <button>聚焦输入框</button></>);
}

ref 的最佳实践

  1. 当你使用外部系统或浏览器 API 时,ref 很有用。如果你很大一部分应用程序逻辑和数据流都依赖于 ref,你可能需要重新考虑你的方法。
  2. 不要在渲染过程中读取或写入 ref.current。 如果渲染过程中需要某些信息,请使用 state 代替。由于 React 不知道 ref.current 何时发生变化,即使在渲染时读取它也会使组件的行为难以预测。(唯一的例外是像 if (!ref.current) ref.current = new Thing() 这样的代码,它只在第一次渲染期间设置一次 ref。)

总结

  1. ref 是一种脱围机制,用于保留不用于渲染的值。 你不会经常需要它们。
  2. ref 是一个普通的 JavaScript 对象,具有一个名为 current 的属性,你可以对其进行读取或设置。
  3. 你可以通过调用 useRef Hook 来让 React 给你一个 ref。
  4. 与 state 一样,ref 允许你在组件的重新渲染之间保留信息。
  5. 与 state 不同,设置 ref 的 current 值不会触发重新渲染。
  6. 不要在渲染过程中读取或写入 ref.current。这使你的组件难以预测。

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

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

相关文章

sed小实践(随手记)

目录 利用到的知识点需求1解法 需求2解法 需求3解法 需求4解法 利用到的知识点 正则表达式管道符sed反向引用 需求1 将/etc/passwd的第一行的头和尾字段调换显示 解法 原始内容 head -1 /etc/passwd root:x:0:0:root:/root:/bin/bash调换后 head -1 /etc/passwd | sed -…

Python项目实战,用Python实现2048游戏

目录 写在前言项目介绍项目思路环境搭建项目实现初始化Python类初始化游戏窗口定义游戏棋盘和方块移动和合并游戏主循环 进一步探索 写在前言 hello&#xff0c;大家好&#xff0c;我是一点&#xff0c;专注于Python编程&#xff0c;如果你也对感Python感兴趣&#xff0c;欢迎…

在2G到4g小区重选过程中,4g频点没有优先级信息,最后UE无法重选到4g,是否正常?

这个确实是老问题了&#xff0c;要翻开GSM 的协议找答案。 GSM cell reselection算法分为cell ranking based和priority based两种方式。cell ranking based 只能从GSM重选到UTRAN&#xff1b;而priority based则可以重选到UTRAN和EUTRA。 根据priority based重选算法的描述&am…

Flink窗口理论到实践 | 大数据技术

⭐简单说两句⭐ ✨ 正在努力的小叮当~ &#x1f496; 超级爱分享&#xff0c;分享各种有趣干货&#xff01; &#x1f469;‍&#x1f4bb; 提供&#xff1a;模拟面试 | 简历诊断 | 独家简历模板 &#x1f308; 感谢关注&#xff0c;关注了你就是我的超级粉丝啦&#xff01; &a…

数据库原理与应用实验三 嵌套查询

实验目的和要求 加深和掌握对嵌套查询的理解和应用 实验环境 Windows10 SQLServer 实验内容与过程 图书&#xff08;书号&#xff0c;书名&#xff0c;价格&#xff0c;出版社&#xff09; 读者&#xff08;卡号&#xff0c;姓名&#xff0c;年龄&#xff0c;所属单位&a…

python的一些库

文章目录 collectionsCounterdequedefaultdictOrderedDict 刷leetcode碰到很多可以直接用python本身提供的一些库和结构&#xff0c;感觉有必要汇总一下&#xff0c;之前列过一次数据结构&#xff0c;太基础还是不够用。 https://blog.csdn.net/wwang_123/article/details/1349…

Vue 基础语法

【1】模板语法 &#xff08;1&#xff09;差值表达式 {{}}是 Vue.js 中的文本插值表达式。 它用于在模板中输出数据或表达式的值。当数据或表达式的值发生变化时&#xff0c;插值表达式会自动更新。 补充&#xff1a;三目运算符 它的基本语法是 Condition ? A : B&#xff0…

STM32CubeMX打开中文乱码

在STM32CubeMX生成的文件中&#xff0c;用Keil5打开中&#xff0c;在其中写入中文注释之后&#xff0c;再次用STM32CubeMX打开生成之后&#xff0c;部分中文就会出现乱码问题&#xff0c;在Keil5中的编码是使用utf-8的编码格式&#xff0c;而在windows系统下&#xff0c;STM32C…

一起了解开源自定义表单的优势表现

随着社会的进步和科技的发展&#xff0c;越来越多的中小企业希望采用更为先进的软件平台&#xff0c;助力企业实现高效率的流程化管理。低代码技术平台、开源自定义表单已经慢慢走入大众视野&#xff0c;成为一款灵活、高效的数字化转型工具。流辰信息专注于低代码技术平台的研…

鸿蒙内核源码分析(原子操作篇) | 谁在为原子操作保驾护航

基本概念 在支持多任务的操作系统中&#xff0c;修改一块内存区域的数据需要“读取-修改-写入”三个步骤。然而同一内存区域的数据可能同时被多个任务访问&#xff0c;如果在修改数据的过程中被其他任务打断&#xff0c;就会造成该操作的执行结果无法预知。 使用开关中断的方…

更适合宝妈和上班族的兼职,每天2小时收入250+的微头条项目

许多人通过撰写微头条赚取收入&#xff0c;但这通常需要自己寻找素材&#xff0c;然后逐字逐句地进行改编创作&#xff0c;整个过程既繁琐又低效。 然而&#xff0c;如今全球范围内的AI工具正如雨后春笋般涌现。百度推出了文心一言&#xff0c;阿里巴巴推出了AI工具通义千问&a…

【必看】ESP32-C3 IDF+VsCode 开发环境搭建(ubuntu 22.04)

详细可阅读官方文档&#x1f603;&#xff08;release/v4.4&#xff09;&#xff1a;点此进入 一、 安装准备&#x1f6e0;︎ 1.1 工具链安装 编译 ESP-IDF 需要以下软件包 sudo apt-get install git wget flex bison gperf python3 python3-pip python3-setuptools cmake n…

【信息系统项目管理师知识点速记】质量管理:控制质量

控制质量是为了评估绩效,确保项目输出完整、正确且满足客户期望,而监督和记录质量管理活动执行结果的过程。控制质量过程需要在整个项目期间开展,其目的是测量产品或服务的完整性、合规性和适用性,以确保项目达到主要干系人的质量要求。 12.5.1 输入 项目管理计划 质量管理…

JavaSE_抽象类(抽象类概念、语法、、特性、作用)

前言 在上一节中&#xff0c;我们讲解了JAVA中的继承&#xff0c;在本节讲解java中抽象类与接口&#xff0c;这个在程序设计中是非常重要的。 一、什么是抽象类 1.1 抽象类概念 基本概念&#xff1a; 在面向对象的概念中&#xff0c;所有的对象都是通过类来描绘的&#xff0…

动态规划——背包问题(01,完全,多重)

一、01背包问题 1.题目描述 有 N 件物品和一个容量是 V 的背包。每件物品只能使用一次。第 i 件物品的体积是 vi&#xff0c;价值是 wi。 求解将哪些物品装入背包&#xff0c;可使这些物品的总体积不超过背包容量&#xff0c;且总价值最大。输出最大价值。 01背包问题特点&…

客户管理软件排行榜:对比18款CRM

本文将对比18个客户管理软件&#xff1a;纷享销客、Zoho CRM、Salesforce、HubSpot CRM、Pipedrive、Freshsales、Microsoft Dynamics 365 CRM、Insightly CRM、Nimble CRM、Apptivo CRM、SugarCRM、白码CRM、简信CRM、销帮帮CRM、Teamface企典CRM、神州云动CRM、悟空CRM、八百…

由于找不到msvcp120.dll,无法继续执行代码的5种解决方法

在操作计算机的过程中&#xff0c;您或许会遇到这样一种情形&#xff1a;当试图启动某个软件应用程序时&#xff0c;系统突然弹出一个错误提示框&#xff0c;明确指出“找不到msvcp120.dll”&#xff0c;它会导致程序无法正常启动或运行。为了解决这个问题&#xff0c;我总结了…

详细分析Java中的@Service注解

目录 1. 基本知识2. Demo2.1 传统形式2.2 注解形式 3. 总结 1. 基本知识 Service 是 Spring Framework 中的一个注解&#xff0c;用于标识一个类为服务层组件 服务层&#xff08;Service Layer&#xff09;&#xff1a; 服务层是应用程序的一个层次结构&#xff0c;位于控制层…

OpenNJet:云原生技术中的创新者与实践者

目录 引言OpenNJet介绍OpenNJet优势1. 性能无损动态配置2. 灵活的CoPilot框架3. 支持HTTP/34. 支持国密5. 企业级应用6. 高效安全 OpenNJet 编译与安装环境准备编译环境配置配置yum源yum 安装软件包创建符号连接修改 ld.so.conf 配置 编译代码 部署 WEB SERVER配置OpenNJet部署…

深入探索JDK:Java开发工具包的奥秘

深入探索JDK&#xff1a;Java开发工具包的奥秘 随着信息技术的飞速发展&#xff0c;Java作为一种广泛使用的编程语言&#xff0c;在各个领域都发挥着重要作用。而JDK&#xff08;Java Development Kit&#xff0c;Java开发工具包&#xff09;作为Java编程的基础&#xff0c;其…