相信有过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内容请搜索剧本之家以前的文章或继承欣赏下面的相关文章但愿各人今后多多支持剧本之家！
您大概感乐趣的文章: