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
useRef

react如何使用mobx6动态加载数据
MobX是一个强大而简单的状态管理工具,它可以帮助我们更好地组织和管理React应用程序中的数据流,本文给大家介绍react如何使用mobx6动态加载数据,感兴趣的朋友跟随小编一起看看吧
2024-02-02
React 中的重新渲染类组件及函数组件
这篇文章主要为大家介绍了React 中的重新渲染类组件及函数组件使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
React router cache route实现缓存页面流程介绍
react-router自身没有路由缓存的特性，在5.x版本之前，我们可以基于react-router-cache-route来实现路由缓存功能。但是react-router 6.x在实现上做了比较大的变化，react-router-cache-route没有提供相应的支持
2023-01-01
详解升级react-router 4 踩坑指南
本篇文章主要介绍了详解升级react-router 4 踩坑指南，主要是对react-router 4升级的踩坑总结，有兴趣的可以了解一下
2017-08-08
每天一个hooks学习之useUnmount
这篇文章主要为大家介绍了每天一个hooks学习之useUnmount，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
React进阶学习之组件的解耦之道
这篇文章主要给大家介绍了关于React进阶之组件的解耦之道，文中通过详细的示例代码给大家介绍了组件分割与解耦的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。
2017-08-08
ReactNative 之FlatList使用及踩坑封装总结
本篇文章主要介绍了ReactNative 之FlatList使用及踩坑封装总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
浅谈React中的元素、组件、实例和节点
这篇文章主要介绍了浅谈React中的元素、组件、实例和节点，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-02
如何在React Native开发中防止滑动过程中的误触
在使用React Native开发的时，当我们快速滑动应用的时候，可能会出现误触，导致我们会点击到页面中的某一些点击事件，误触导致页面元素响应从而进行其他操作,表现出非常不好的用户体验。
2023-05-05
webpack构建react多页面应用详解
这篇文章主要介绍了webpack构建react多页面应用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09