相信有過React使用經(jīng)驗的人對ref都會熟悉，它可以用來獲取組件實例對象或者是DOM對象。
而useRef這個hooks函數(shù)，除了傳統(tǒng)的用法之外，它還可以“跨渲染周期”保存數(shù)據(jù)。
首先來看一下它傳統(tǒng)的用法：
|
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創(chuàng)建了couterRef對象，并將其賦給了button的ref屬性。這樣，通過訪問couterRef.current就可以訪問到button對應(yīng)的DOM對象。
然后再來看看它保存數(shù)據(jù)的用法。
在一個組件中有什么東西可以跨渲染周期，也就是在組件被多次渲染之后依舊不變的屬性？第一個想到的應(yīng)該是state。沒錯，一個組件的state可以在多次渲染之后依舊不變。但是，state的問題在于一旦修改了它就會造成組件的重新渲染。
那么這個時候就可以使用useRef來跨越渲染周期存儲數(shù)據(jù)，而且對它修改也不會引起組件渲染。
|
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，從而能正常清除定時器。
到此這篇關(guān)于React中useRef的具體使用的文章就介紹到這了,更多相關(guān)React useRef內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/hjc256/article/details/102587037
