相信有過React使用經驗的人對ref都會熟悉，它可以用來獲取組件實例對象或者是DOM對象。
而useRef這個hooks函數，除了傳統的用法之外，它還可以“跨渲染周期”保存數據。
首先來看一下它傳統的用法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
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來跨越渲染周期存儲數據，而且對它修改也不會引起組件渲染。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
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內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/hjc256/article/details/102587037
