脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React useRef

React中useRef的具体使用

 更新时间：2021年04月13日 10:37:38   作者：Meskjei  
这篇文章主要介绍了React中useRef的具体使用，它可以用来获取组件实例对象或者是DOM对象，除此之外还有哪些用法，就一起来了解一下

相信有过React使用经验的人对ref都会熟悉，它可以用来获取组件实例对象或者是DOM对象。

而useRef这个hooks函数，除了传统的用法之外，它还可以“跨渲染周期”保存数据。

首先来看一下它传统的用法：

import React, { useState, useEffect, useMemo, useRef } from 'react';

export default function App(props){
  const [count, setCount] = useState(0);

  const doubleCount = useMemo(() => {
    return 2 * count;
  }, [count]);

  const couterRef = useRef();

  useEffect(() => {
    document.title = `The value is ${count}`;
    console.log(couterRef.current);
  }, [count]);
  
  return (
    <>
      <button ref={couterRef} onClick={() => {setCount(count + 1)}}>Count: {count}, double: {doubleCount}</button>
    </>
  );
}

代码中用useRef创建了couterRef对象，并将其赋给了button的ref属性。这样，通过访问couterRef.current就可以访问到button对应的DOM对象。

然后再来看看它保存数据的用法。

在一个组件中有什么东西可以跨渲染周期，也就是在组件被多次渲染之后依旧不变的属性？第一个想到的应该是state。没错，一个组件的state可以在多次渲染之后依旧不变。但是，state的问题在于一旦修改了它就会造成组件的重新渲染。

那么这个时候就可以使用useRef来跨越渲染周期存储数据，而且对它修改也不会引起组件渲染。

import React, { useState, useEffect, useMemo, useRef } from 'react';

export default function App(props){
  const [count, setCount] = useState(0);

  const doubleCount = useMemo(() => {
    return 2 * count;
  }, [count]);

  const timerID = useRef();
  
  useEffect(() => {
    timerID.current = setInterval(()=>{
        setCount(count => count + 1);
    }, 1000); 
  }, []);
  
  useEffect(()=>{
      if(count > 10){
          clearInterval(timerID.current);
      }
  });
  
  return (
    <>
      <button ref={couterRef} onClick={() => {setCount(count + 1)}}>Count: {count}, double: {doubleCount}</button>
    </>
  );
}

在上面的例子中，我用ref对象的current属性来存储定时器的ID，这样便可以在多次渲染之后依旧保存定时器ID，从而能正常清除定时器。

到此这篇关于React中useRef的具体使用的文章就介绍到这了,更多相关React useRef内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • React报错之Parameter event implicitly has an any type解决

    React报错之Parameter event implicitly has a

    这篇文章主要为大家介绍了React报错之Parameter event implicitly has an any type，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • React Hooks获取数据实现方法介绍

    React Hooks获取数据实现方法介绍

    这篇文章主要介绍了react hooks获取数据,文中给大家介绍了useState dispatch函数如何与其使用的Function Component进行绑定，实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2022-10-10
  • React 源码中的依赖注入方法

    React 源码中的依赖注入方法

    这篇文章主要介绍了React 源码中的依赖注入方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • react路由基础解读(Router、Link和Route)

    react路由基础解读(Router、Link和Route)

    这篇文章主要介绍了react路由基础解读(Router、Link和Route)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-07-07
  • React中使用setInterval函数的实例

    React中使用setInterval函数的实例

    这篇文章主要介绍了React中使用setInterval函数的实例,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-04-04
  • React实现多标签在有限空间内展示

    React实现多标签在有限空间内展示

    在业务中,需要在一个卡片组件中展示多个标签,标签组件高度相同,宽度和出现顺序不同,要求标签只能在有限的空间内展示,所以本文给大家介绍了React实现多标签在有限空间内展示,需要的朋友可以参考下
    2023-12-12
  • create-react-app项目配置全解析

    create-react-app项目配置全解析

    这篇文章主要为大家介绍了create-react-app项目配置全解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-06-06
  • 实例讲解React 组件生命周期

    实例讲解React 组件生命周期

    这篇文章主要介绍了React 组件生命周期的相关资料，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
    2020-07-07
  • 关于react useState更新异步问题

    关于react useState更新异步问题

    这篇文章主要介绍了关于react useState更新异步问题，具有很好的参考价值，希望对大家有所帮助。以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

    2022-08-08
  • React Refs 的使用forwardRef 源码示例解析

    React Refs 的使用forwardRef 源码示例解析

    这篇文章主要为大家介绍了React 之 Refs 的使用和 forwardRef 的源码解读，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11

最新评论