关于前端:react-useRef的两层用法开眼界了

置信有过 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，从而能失常革除定时器。

更多前端常识，请关注小程序，不定期有惊喜！