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项目中使用Redux

    详解如何优雅地在React项目中使用Redux

    这篇文章主要介绍了详解如何优雅地在React项目中使用Redux,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • 如何解决React官方脚手架不支持Less的问题(小结)

    如何解决React官方脚手架不支持Less的问题(小结)

    这篇文章主要介绍了如何解决React官方脚手架不支持Less的问题(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 如何使用Redux Toolkit简化Redux

    如何使用Redux Toolkit简化Redux

    这篇文章主要介绍了如何使用Redux Toolkit简化Redux,帮助大家更好的理解和学习使用React框架,感兴趣的朋友可以了解下
    2021-04-04
  • 详解webpack + react + react-router 如何实现懒加载

    详解webpack + react + react-router 如何实现懒加载

    这篇文章主要介绍了详解webpack + react + react-router 如何实现懒加载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-11-11
  • react native 获取地理位置的方法示例

    react native 获取地理位置的方法示例

    这篇文章主要介绍了react native 获取地理位置的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 使用webpack5从0到1搭建一个react项目的实现步骤

    使用webpack5从0到1搭建一个react项目的实现步骤

    这篇文章主要介绍了使用webpack5从0到1搭建一个react项目的实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • React html中使用react的两种方式

    React html中使用react的两种方式

    这篇文章主要介绍了React html中使用react的两种方式,本文给大家提到了React pwa的配置代码,给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • React-intl 实现多语言的示例代码

    React-intl 实现多语言的示例代码

    本篇文章主要介绍了React-intl 实现多语言的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • react路由配置方式详解

    react路由配置方式详解

    本篇文章主要介绍了react路由配置方式详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • React-Native中props具体使用详解

    React-Native中props具体使用详解

    本篇文章主要介绍了React-Native中props具体使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论