React中useRef的具體使用

更新時(shí)間：2021年04月13日 10:37:38 作者：Meskjei

這篇文章主要介紹了React中useRef的具體使用，它可以用來(lái)獲取組件實(shí)例對(duì)象或者是DOM對(duì)象，除此之外還有哪些用法，就一起來(lái)了解一下

相信有過React使用經(jīng)驗(yàn)的人對(duì)ref都會(huì)熟悉，它可以用來(lái)獲取組件實(shí)例對(duì)象或者是DOM對(duì)象。

而useRef這個(gè)hooks函數(shù)，除了傳統(tǒng)的用法之外，它還可以“跨渲染周期”保存數(shù)據(jù)。

首先來(lái)看一下它傳統(tǒng)的用法：

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創(chuàng)建了couterRef對(duì)象，并將其賦給了button的ref屬性。這樣，通過訪問couterRef.current就可以訪問到button對(duì)應(yīng)的DOM對(duì)象。

然后再來(lái)看看它保存數(shù)據(jù)的用法。

在一個(gè)組件中有什么東西可以跨渲染周期，也就是在組件被多次渲染之后依舊不變的屬性？第一個(gè)想到的應(yīng)該是state。沒錯(cuò)，一個(gè)組件的state可以在多次渲染之后依舊不變。但是，state的問題在于一旦修改了它就會(huì)造成組件的重新渲染。

那么這個(gè)時(shí)候就可以使用useRef來(lái)跨越渲染周期存儲(chǔ)數(shù)據(jù)，而且對(duì)它修改也不會(huì)引起組件渲染。

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對(duì)象的current屬性來(lái)存儲(chǔ)定時(shí)器的ID，這樣便可以在多次渲染之后依舊保存定時(shí)器ID，從而能正常清除定時(shí)器。

到此這篇關(guān)于React中useRef的具體使用的文章就介紹到這了,更多相關(guān)React useRef內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: