React-useRef

如果我们想在hooks里面获同步取最新的值,那么则可以使用useRef, 关键源码如下:


function mountRef<T>(initialValue: T): {|current: T|} {const hook = mountWorkInProgressHook();const ref = {current: initialValue};hook.memoizedState = ref;return ref;
}function updateRef<T>(initialValue: T): {|current: T|} {const hook = updateWorkInProgressHook();return hook.memoizedState;
}

可以看到,代码实现非常简单,创建一个ref对象,然后挂载到hook.memoizedState, 我们在修改的时候,就是直接修改ref.current。useRef其实就是提供一个稳定的变量,在组件的整个生命周期都是持续存在且是同一个引用。
注意:修改useRef返回的状态不会引起UI的重渲染。

为什么在setTimeout的回调函数里面,拿不到useState的最新值?
主要有以下三点原因:
•  react 中的state,遵循着状态不可变的原则,在setState之后,不会修改原来老的state的值,而是把新值重新赋值给hook.memoizedState
•  对于react函数组件,其本身就是个render函数,每次重渲染之后,都会重新执行此函数,而每次执行的时候就会产生一个新的函数作用域。
•  setTimeout的回调函数对hook.memoizedState形成了闭包引用,而在setState之后,都会重新执行组件函数,setTimeout 的回调函数会捕获在 setTimeout 被创建时的状态的快照,而不是最新的状态。

但是为什么又能获取useRef的最新值呢?
useRef本身并不能解决闭包引用的问题,但是它通过创建一个稳定的引用:

function mountRef<T>(initialValue: T): {|current: T|} {const hook = mountWorkInProgressHook();const ref = {current: initialValue};hook.memoizedState = ref;return ref;
}

mount在整个组件生命周期,只会触发一次,因此只会创建一次。然后这也是为什么要创建一个对象,而对象上近仅创建一个current属性来存储数据,正是为了让开发者在整个生命周期,拿到的始终是同一个引用,可以把它想象成当前组件域下的一个全局变量了,而修改数据仅仅在这个引用上的current属性修改。

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

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

相关文章

幽灵依赖与常见依赖管理

文章目录 前言1. 演示&#xff1a;检测和修复幽灵依赖步骤1&#xff1a;安装 depcheck步骤2&#xff1a;在项目根目录运行 depcheck可能的输出步骤3&#xff1a;修复幽灵依赖 2. 依赖管理的好习惯 1. 场景设定现在有如下依赖需求&#xff1a; 2. 依赖冲突的表现3. 解决依赖冲突…

如何使用人工智能大模型,免费快速写工作总结?

如何使用人工智能大模型&#xff0c;免费快速写工作总结&#xff1f; 详细学习视频https://edu.csdn.net/learn/40406/666581

[Java实战经验]异常处理最佳实践

一些好的异常处理实践。 目录 异常设计自定义异常为异常设计错误代码&#xff08;状态码&#xff09;设计粒度全局异常处理异常日志信息保留 异常处理时机资源管理try-with-resources异常中的事务 异常设计 自定义异常 自定义异常设计&#xff0c;如业务异常定义BusinessExce…

Makefile 入门指南

Makefile 入门指南 最简单的例子 单文件编译 假设我们有一个main.cpp文件&#xff0c;最简单的Makefile如下&#xff1a; # 最简单的单文件编译 # 目标:依赖文件 main: main.cpp# 编译命令g main.cpp -o main使用步骤&#xff1a; 将上述内容保存为名为Makefile的文件&…

PyTorch数据操作基础教程:从张量创建到高级运算

本文通过示例代码全面讲解PyTorch中张量的基本操作&#xff0c;包含创建、运算、广播机制、索引切片等核心功能&#xff0c;并提供完整的代码和输出结果。 1. 张量创建与基本属性 import torch# 创建连续数值张量 x torch.arange(12, dtypetorch.float32) print("原始张…

【Redis】Redis中的常见数据类型(一)

文章目录 前言一、Redis前置知识1. 全局命令2、数据结构和内部编码3. 单线程架构 二、String 字符串1. 常见命令2. 计数命令3.其他命令4. 内部编码5. 典型使用场景 三、Hash哈希1. 命令2.内部编码3. 使用场景4. 缓存方式对比 结语 前言 Redis 提供了 5 种数据结构&#xff0c;…

Windows 中使用 `netstat` 命令查看端口占用

在 Windows 系统中&#xff0c;可以通过 netstat 命令来查看当前系统的网络连接以及端口的占用情况。以下是关于该命令的具体说明&#xff1a; #### 使用方法 1. **查看所有端口及其状态** 可以通过以下命令查看系统中的所有活动连接和监听端口&#xff1a; bash net…

23种设计模式-结构型模式之装饰器模式(Java版本)

Java 装饰器模式&#xff08;Decorator Pattern&#xff09;详解 &#x1f381; 什么是装饰器模式&#xff1f; 装饰器模式是一种结构型设计模式&#xff0c;允许向一个对象动态添加新的功能&#xff0c;而不改变其结构。 &#x1f9f1; 你可以想象成在原有功能上“包裹”一…

解决模拟器打开小红书设备异常问题

解决模拟器打开小红书设备异常问题 解决模拟器打开小红书设备异常问题和无法打开问题 解决模拟器打开小红书设备异常问题和无法打开问题 问题描述 最近有用户反馈在模拟器上无法正常登录和打开小红书APP&#xff0c;系统提示"设备异常"错误。本文将详细介绍如何通过…

论文阅读:2025 arxiv AI Alignment: A Comprehensive Survey

总目录 大模型安全相关研究&#xff1a;https://blog.csdn.net/WhiffeYF/article/details/142132328 AI Alignment: A Comprehensive Survey 人工智能对齐&#xff1a;全面调查 https://arxiv.org/pdf/2310.19852 https://alignmentsurvey.com/ https://www.doubao.com/cha…

精益数据分析(1/126):从《精益数据分析》探寻数据驱动增长之道

精益数据分析&#xff08;1/126&#xff09;&#xff1a;从《精益数据分析》探寻数据驱动增长之道 在当今数字化时代&#xff0c;数据无疑是企业发展的关键驱动力&#xff0c;对于竞争激烈的程序化广告行业更是如此。最近我在研读《精益数据分析》这本书&#xff0c;收获颇丰&…

第五节:React Hooks进阶篇-如何用useMemo/useCallback优化性能

反模式&#xff1a;滥用导致的内存开销React 19编译器自动Memoization原理 React Hooks 性能优化进阶&#xff1a;从手动到自动 Memoization &#xff08;基于 React 18 及以下版本&#xff0c;结合 React 19 新特性分析&#xff09; 一、useMemo/useCallback 的正确使用场景…

windows server C# IIS部署

1、添加IIS功能 windows server 2012、windows server 2016、windows server 2019 说明&#xff1a;自带的是.net 4.5 不需要安装.net 3.5 尽量使用 windows server 2019、2016高版本&#xff0c;低版本会出现需要打补丁的问题 2、打开IIS 3、打开iis应用池 .net 4.5 4、添…

Elasticsearch的Java客户端库QueryBuilders查询方法大全

matchAllQuery 使用方法&#xff1a;创建一个查询&#xff0c;匹配所有文档。 示例&#xff1a;QueryBuilders.matchAllQuery() 注意事项&#xff1a;这种查询不加任何条件&#xff0c;会返回索引中的所有文档&#xff0c;可能会影响性能&#xff0c;特别是文档数量很多时。 ma…

C#进阶学习(六)单向链表和双向链表,循环链表(下)循环链表

目录 &#x1f4ca; 链表三剑客&#xff1a;特性全景对比表 一、循环链表节点类 二、循环链表的整体设计框架 三、循环列表中的重要方法&#xff1a; &#xff08;1&#xff09;头插法&#xff0c;在头结点前面插入新的节点 &#xff08;2&#xff09;尾插法实现插入元素…

交换网络基础

学习目标 掌握交换机的基本工作原理 掌握交换机的基本配置 交换机的基本工作原理 交换机是局域网&#xff08;LAN&#xff09;中实现数据高效转发的核心设备&#xff0c;工作在 数据链路层&#xff08;OSI 模型第二层&#xff09;&#xff0c;其基本工作原理可概括为 “学习…

科学研究:怎么做

科研&#xff08;科学研究&#xff09;​​ 是指通过系统化的方法&#xff0c;探索自然、社会或人文领域的未知问题&#xff0c;以发现新知识、验证理论或解决实际问题的活动。它的核心是​​基于证据的探索与创新​​&#xff0c;旨在推动人类认知和技术的进步。 科研的核心要…

算法题(128):费解的开关

审题&#xff1a; 本题需要我们将多组测试用例中拉灯数小于等于6的最小拉灯数输出&#xff0c;若拉灯数最小值仍大于6&#xff0c;则输出-1 思路&#xff1a; 方法一&#xff1a;二进制枚举 首先我们先分析一下基本特性&#xff1a; 1.所有的灯不可能重复拉&#xff1a;若拉的数…

MFC文件-屏幕录像

下载本文件 本文件将获取屏幕图像数据的所有代码整合到两个文件中&#xff08;ScreenRecorder.h和ScreenRecorder.cpp&#xff09;&#xff0c;使获取屏幕图像数据变得简单。输出IYUV视频流。还可以获取系统播放的声音&#xff0c;输出PCM音频流。由于使用了MFC类&#xff0c;本…

0801ajax_mock-网络ajax请求1-react-仿低代码平台项目

0 vite配置proxy代理 vite.config.ts代码如下图所示&#xff1a; import { defineConfig } from "vite"; import react from "vitejs/plugin-react";// https://vite.dev/config/ export default defineConfig({plugins: [react()],server: {proxy: {&qu…