首页
学习
活动
专区
工具
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.9K20

ahooks 是怎么解决 React 的闭包问题的?

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

1.3K21
  • React系列-轻松学会Hooks

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

    4.4K20

    理解 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.3K10

    精读《useRef 与 createRef 的区别》

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

    80810

    【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.8K20

    react hooks 全攻略

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

    44940

    闭包

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

    44020

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

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

    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 的方式,其余情况两种都可以。

    89340

    你不知道的React Ref

    那么在本教程中,我将尽可能的向大家介绍React中的Ref 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组件中的状态而该状态不应该触发组件的重新渲染时,都可以使用React的useRef Hooks为其创建一个实例变量。

    2.2K50

    通过 React Hooks 声明式地使用 setInterval

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

    7.6K220

    你可能不知道的 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 值不会触发重新渲染。

    12500
    领券