首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么useRef可以用来存储react中的setInterval引用,而不能用来存储普通变量?

useRef可以用来存储react中的setInterval引用,而不能用来存储普通变量的原因是因为useRef的特性和用途。

useRef是React提供的一个Hook函数,用于在函数组件中存储和访问可变的值。它返回一个可变的ref对象,该对象的current属性可以被赋值为任意值,并且在组件的整个生命周期中保持不变。

在React中,每次组件重新渲染时,函数组件内的所有变量都会被重新声明和初始化。这意味着如果我们在函数组件中声明一个普通变量,并且在组件重新渲染时给它赋予新的值,那么之前存储的值将会丢失。

而对于setInterval引用,我们通常希望在组件重新渲染时能够保持引用的一致性,以便能够正确地清除定时器。这时候就可以使用useRef来存储setInterval的引用。由于useRef返回的ref对象在组件重新渲染时不会发生变化,因此我们可以在每次组件重新渲染时,通过useRef获取到之前存储的引用,并进行清除操作。

然而,对于普通变量来说,我们通常不需要在组件重新渲染时保持其值的一致性,因为我们可以直接通过变量的声明和初始化来获取最新的值。因此,使用useRef来存储普通变量是没有必要的,而且也不符合useRef的设计初衷。

总结起来,useRef适用于需要在组件重新渲染时保持引用一致性的场景,比如存储setInterval引用。而对于普通变量,我们可以直接使用变量的声明和初始化来获取最新的值。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React ref & useRef 完全指南,原来这么用!

在这篇文章,你将学习如何使用React.useRef()钩子来创建持久可变值(也称为references或refs),以及访问DOM元素。 我们将从下面几点讲解: 1....实例:记录按钮点击 组件logbuttonclicked使用了一个引用来存储按钮点击次数: import { useRef } from 'react'; function LogButtonClicks...state 更新是异步(state变量在重新呈现后更新),ref则同步更新(更新后值立即可用) 从更高角度来看,ref 用于存储组件基础设施数据, state 存储直接呈现在屏幕上信息。...实例:实现秒表 你可以存储在 ref 东西是涉及到一些副作用基础设施信息。例如,你可以在ref存储不同类型指针:定时器id,套接字id,等等。...()创建一个引用来保存输入元素。

6.2K20

ahooks 是怎么解决 React 闭包问题

,发现 setInterval 打印出来值并没有发生变化,始终都是 0。...memoizedState 属性就是用来存储组件上一次更新后 state,next 指向下一个 hook 对象。...同时制定了一系列规则,比如不能将 hooks 写入到 if...else... 。从而保证能够正确拿到相应 hook state。 useEffect 接收了两个参数,一个回调函数和一个数组。...useRef 创建是一个普通 Javascript 对象,而且会在每次渲染时返回同一个 ref 对象,当我们变化它 current 属性时候,对象引用都是同一个,所以定时器能够读到最新值。...}`); }); Demo 地址[5] 我们来看下它源码,可以看到其还是通过 useRef 保持 function 引用地址不变,并且每次执行都可以拿到最新 state 值。

1.2K21

React系列-轻松学会Hooks

(initialValue),另外ref对象引用在整个生命周期保持不变 为什么使用 useRef可以用于访问DOM节点或React组件实例和作为容器保存可变变量。...注意:createRef 每次渲染都会返回一个新引用 useRef 每次都会返回相同引用。...注意一点:组件实例是对于类组件来说 函数组件没有实例,使用React.forwardRefAPI是转发ref拿到子组件DOM想要获取节点,并不是获取实例,因为函数组件没有实例这一概念, 存储可变变量容器...在实例变量:该变量引用将在组件整个生命周期内保持不变。实例变量更改不会产生重新渲染。...获取上一轮 props 或 state Ref 不仅可以拿到组件引用、创建一个 Mutable 副作用对象,还可以配合 useEffect 存储一个较老值,最常用来拿到 previousProps,

4.3K20

理解 React Hooks Capture Value 特性

“这个 effects 取值怎么不是最新?!”这个疑惑可以说是在使用 React Hooks 时经常遇到疑问。...在下列代码,当你点击按钮 3s 后,alert 显示数值却是 3s 前 count 变量 —— 即无法获取最新值,获取值是过去某个时刻: import React, { useState,...`count` 变量 回到原来问题,倔强如我,我就是想要在 3s 后获取是此时此刻 count 变量不是我 3s 前点击时 count 值,该怎么操作?...获取即刻 count 变量 ref 类型变量通常是用来存储 DOM 元素引用,但在 react hooks ,它可以存放任何可变数据,就好比类实例属性一样,具体参考 Is there something...探索如何让 setInterval 和 Hooks 和谐地玩耍,为什么是这种方式,以及这种方式给你带来了什么新能力。 How to get the previous props or state?

1.8K10

理解 React Hooks Capture Value 特性

“这个 effects 取值怎么不是最新?!”这个疑惑可以说是在使用 React Hooks 时经常遇到疑问。...在下列代码,当你点击按钮 3s 后,alert 显示数值却是 3s 前 count 变量 —— 即无法获取最新值,获取值是过去某个时刻: import React, { useState,...count 变量 回到原来问题,倔强如我,「我就是想要在 3s 后获取是此时此刻 count 变量不是我 3s 前点击时 count 值」,该怎么操作?...3s 后 alert 显示 count 变量就是最新 value ❝ref 类型变量通常是用来存储 DOM 元素引用,但在 react hooks ,它可以存放任何可变数据,就好比类实例属性一样...探索如何让 setInterval 和 Hooks 和谐地玩耍,为什么是这种方式,以及这种方式给你带来了什么新能力。 How to get the previous props or state?

1.2K10

精读《useRef 与 createRef 区别》

Render 重复初始化,这也是 Hooks 独特之处,虽然用在普通函数,但在 React 引擎中会得到超出普通函数表现,比如初始化仅执行一次,或者引用不变。...我们可以看到,在 Commit phase 阶段可以做这件事,或者在回调函数做(脱离了 React 生命周期)。...不仅可以拿到组件引用、创建一个 Mutable 副作用对象,还可以配合 useEffect 存储一个较老值,最常用来拿到 previousProps,React 官方利用 Ref 封装了一个简单...ref 可以将值 “在各个不同 Render 闭包传递特性”。...最后,不要滥用 Ref,Mutable 引用越多,对 React 来说可维护性一般会越差。 4 总结 你还挖掘了 useRef 哪些有意思使用方式?欢迎在评论区留言。

75410

react】203-十个案例学会 React Hooks

我们还可以通过 this 这个对象来存储函数,而在函数组件没办法进行挂载了。...useRef 保存引用useRef 跟 createRef 类似,都可以用来生成对 DOM 对象引用,看个简单例子:在线 Demo import React, { useState, useRef...可以认为 ref 在所有 Render 过程中保持着唯一引用,因此所有对 ref 赋值或取值,拿到都只有一个最终状态,不会在每个 Render 间存在隔离。...而在类组件 3 秒后输出就是修改后值,因为这时候 message 是挂载在 this 变量上,它保留是一个引用值,对 this 属性访问都会获取到最新值。...讲到这里你应该就明白了,useRef 创建一个引用,就可以有效规避 React Hooks Capture Value 特性。

3.1K20

104.精读《Function Component 入门》

想要理解为什么,首先要理解 useRef 功能:通过 useRef 创建对象,其值只有一份,而且在所有 Rerender 之间共享。...只考虑上面的场景,看看为什么 React 团队要将 useReducer 列为内置 Hooks 之一。... useContext + useMemo 场景: 由于注入 state 是全量,Render 函数想用什么都可直接用,在按保存键时,eslint-plugin-react-hooks 会通过静态分析...我们使用 DefaultProps 本意必然是希望默认值引用相同, 如果不想单独维护变量引用,还可以借用 React 内置 defaultProps 方法解决。...如果你完整读完了本文,应该可以充分理解第一个例子 schema 在每个渲染快照中都是一个新引用 Ref 例子,schema 在每个渲染快照中都只有一个唯一引用。 3.

1.7K20

react hooks 全攻略

# 为什么使用 useRef 在 JavaScript ,我们可以创建变量并将其赋给不同值。然而,在函数组件,每次重新渲染时,所有的局部变量都会被重置。...这就意味着我们无法在函数组件创建一个持久存在变量。 这时候就可以使用 useRef 来解决这个问题。useRef 可以用于在函数组件存储和访问可变数据,这些数据不会触发组件重新渲染。...# useRef 实现原理 useRef 实现原理其实很简单。在每次函数组件执行时,它返回一个持久化引用对象。这个对象有一个 current 属性,可以用来存储和读取值。...存储组件内部值:可以使用 useRef存储某些组件内值,类似于类组件实例变量。与状态 Hook(如 useState)不同,使用 useRef 存储更改不会触发组件重新渲染。...将计算结果存储useRef 返回引用,然后在后续渲染中使用该引用。这可以避免重复计算,提高性能。

36840

闭包

作用域也可以根据代码层次分层,以便子作用域可以访问父作用域,通常是指沿着链式作用域链查找,不能从父作用域引用子作用域中变量引用。 为了定义一个闭包,首先需要一个函数来套一个匿名函数。...回调函数就是一个典型闭包,回调函数可以访问父级函数作用域中变量不需要将变量作为参数传递到回调函数,这样就可以减少参数传递,提高代码可读性。...,那么在何处存储这些变量呢,当然我们可以在global/window构造一个全局对象来存储,但是之前也提到过了全局变量污染会导致应用程序不可预测性,所以在这里我们更希望用闭包来进行存储。...在下边这个例子我们就使用了闭包来存储了请求时一些信息,并且在重试时保证了这些信息是最初定义时信息,这样就不需要污染全局变量,而且需要对于业务调用来说,我们可以再包装一侧requestWithLimit...在React我们就可以借助useRef来做到这点,通过保持对象引用来解决上述问题。 // https://codesandbox.io/s/react-closure-trap-jl9jos?

41720

什么是 useRef , useRef 与 createRef 区别, 以及在什么情况下使用 useRef

换句人话说 , useRefreact hook 作用, 正如官网说, 它像一个变量, 类似于 this , 它就像一个盒子, 你可以存放任何东西....createRef 每次渲染都会返回一个新引用 useRef 每次都会返回相同引用。 如果你还不太理解, 没关系....为什么不是界面上 count 实时状态? 实际实现原理复杂得多, 此处可以先简单理解成下面的普通函数执行. ?...总结 useRef 不仅仅是用来管理 DOM ref ,它还相当于 this , 可以存放任何变量. useRef 可以很好解决闭包带来不方便性....你可以在各种库中看到它身影, 比如 react-use useInterval , usePrevious …… 值得注意是,当 useRef 内容发生变化时,它不会通知您。

6.9K42

从根上理解 React Hooks 闭包陷阱(续集)

所以,这种把依赖 state 添加到 deps 里方式是能解决闭包陷阱,但是定时器不能这样做。 那还有什么方式能解决闭包陷阱呢? useRef。...总结 上篇文章我们通过把依赖 state 添加到 deps 数组方式,使得每次 state 变了就执行新函数,引用 state,从而解决了闭包陷阱问题。...useRef 能解决闭包陷阱原因是 useEffect 等 hook 里不直接引用 state,而是引用 ref.current,这样后面只要修改了 ref 值,这里取出来就是最新。...解决 hooks 闭包陷阱有两种方式: 设置依赖 state 到 deps 数组并添加清理函数 不直接引用 state,把 state 放到 useRef 创建 ref 对象引用 处理定时器时候...,为保证计时准确,最好使用 useRef 方式,其余情况两种都可以

78140

你不知道React Ref

那么在本教程,我将尽可能向大家介绍ReactRef 1 Why React Hook ?...React Ref经常与DOM保持紧密关联,但是自从出现了React Hook以后,Ref使用也不再变得只是与Dom相关Api,而是可以表示对任何内容引用(DOM节点,JavaScript值等...,接下来我们将引用React.useRef这个API,这是React为函数式组件使用Ref时提供最新API。...,实际上useRef Hook返回值是一个对象,其具有两个特点: 具有current属性,该属性是可变可以在组件生命周期中随时更改 其实单看上面代码并不能明确单独Ref改变是否会引起页面的重新渲染...,每当需要跟踪React组件状态该状态不应该触发组件重新渲染时,都可以使用ReactuseRef Hooks为其创建一个实例变量

2.1K50

通过 React Hooks 声明式地使用 setInterval

不关心为什么这样实现读者,就不用继续阅读了。下面的内容是为希望深入理解 React Hooks 读者准备。 --- 哈?! 我知道你想什么: Dan,这代码不对劲。...所以我们第一次事先在某些简单情况下,是可以执行。 但是 setInterval() 不会 “忘记”。 它会一直引用着旧 props 和 state,除非把它换了。...行了 可变 savedCallback 需要在多次渲染之间“持久化”,所以不能使用常规变量。我们需要像类似实例字段手段。...从 Hooks FAQ ,我们得知 useRef() 可以帮我们做到这点: const savedCallback = useRef(); // { current: null } (你可能已经对...Hooks 引用了相同概念,用于持有任意可变值。一个 ref 就行一个“盒子”,可以放东西进去。) useRef() 返回了一个字面量,持有一个可变 current 属性,在每一次渲染之间共享。

7.5K220

你可能不知道 React Hooks

突变、订阅、计时器、日志记录和其他副作用不允许出现在函数组件主体(称为 React render 阶段)。 这样做会导致用户界面错误和不一致。...与局部变量不同,React 确保在每次渲染期间返回相同引用。 这个代码看起来是正确,但是有一个微妙错误。...memoization 是 React 主要性能优化工具。 React.memo 进行浅比较,如果引用相同,则跳过 render 阶段。...它们几乎在任何地方都可以安全地使用,不需要太多思考 useReducer useState useContext ?...防止在钩子上读写相同数值 不要在渲染函数中使用可变变量,而应该使用useRef 如果你保存在useRef 生命周期小于组件本身,在处理资源时不要忘记取消设置值 谨慎使用无限递归导致资源衰竭 在需要时候使用

4.7K20

脱围:使用 ref 保存值及操作DOM

♻️ 前面多篇文章中提及:state 可以 ① 保存渲染间数据; ② state setter 函数更新变量会触发 React 重新渲染组件。...存储 timeout ID 存储和操作 DOM 元素 存储不需要被用来计算 JSX 其他对象 ref 与 state 不同之处 ✈️ 与 state 一样,React 会在每次重新渲染之间保留 ref...可变 —— 可以在渲染过程之外修改和更新 current 值。 “不可变” —— 必须使用 state 设置函数来修改 state 变量,从而排队重新渲染。...可以随时读取 state。但是,每次渲染都有自己不变 state 快照。 useRef 内部是如何运行?...同时,ref 是一个普通 JavaScript 对象,具有一个名为 current 属性,可以对其进行读取或设置。与 state 不同,设置 ref current 值不会触发重新渲染。

6000
领券