相信用过React的人都会对ref不陌生，ref可以用来获取组件实例对象或者DOM对象。useRefhooks函数，除了传统用法外，还可以“跨渲染周期”保存数据。先来看看它的传统用法：importReact,{useState,useEffect,useMemo,useRef}from'react';导出默认函数App(props){const[count,setCount]=useState(0);constdoubleCount=useMemo(()=>{return2*count;},[count]);constcouterRef=useRef();useEffect(()=>{document.title=`值为${count}`;console.log(couterRef.current);},[count]);return(<>{setCount(count+1)}}>Count:{count},double:{doubleCount});}的代码使用useRef创建一个couterRef对象并将其分配给按钮的ref属性。这样就可以通过访问couterRef.current来访问按钮对应的DOM对象了。那么我们来看看它是如何保存数据的。组件中是否存在可以跨渲染周期的东西，即组件多次渲染后属性保持不变？首先想到的应该是状态。没错，一个组件的状态可以在多次渲染后保持不变。但是state的问题在于，一旦修改就会导致组件重新渲染。那么此时就可以使用useRef跨渲染周期存储数据，修改它不会导致组件渲染。importReact,{useState,useEffect,useMemo,useRef}from'react';导出默认函数App(props){const[count,setCount]=useState(0);constdoubleCount=useMemo(()=>{return2*count;},[count]);consttimerID=useRef();useEffect(()=>{timerID.current=setInterval(()=>{setCount(count=>count+1);},1000);},[]);useEffect(()=>{if(count>10){clearInterval(timerID.current);}});return(<>{setCount(count+1)}}>Count:{count},double:{doubleCount});}在上面的例子，我使用了ref对象的current属性来存储定时器的ID，这样在多次渲染之后仍然可以保存定时器ID，这样定时器就可以正常清零了。更多前端知识，请关注小程序，不定时有惊喜哦！
