useRef
可以直接用來 修改DOM節點屬性 和 儲存可變值(mutable value);更棒的是,使用 useRef
不僅會hold住參照值,也不會造成額外的render。
useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.
這邊跟著影片範例實作兩種使用 useRef
的常用時機:(1) 直接存取DOM節點(<Focus/>
); (2) 儲存可變值 (<ClassTimer/>
vs <HookTimer/>
)。
在儲存可變值的範例中,使用Function component 遇到的問題是,當變數是在 useEffect
裡宣告,就沒辦法在函數以外存取這個值,這時可以使用 useRef
來解決這個問題,另外還能在每次 state
改變,也就是 timer
改變造成rerender時保存值。
另外也推薦一位YT工程師James五分鐘解釋useRef和useState的短片也把useRef和useState差異講的非常好。
最後整理一下使用 useRef
的優點:
- 可儲存參照值(類似class component的instance properties)
- 參照值改變不會有額外的re-render
- 即使其他state變數改變 rerender component,還是能儲存參照值
References