关于前端: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，从而能失常革除定时器。

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