你不知道的 useRef

前言: 這篇文章會假設你已經對 react hook 有一些基礎的瞭解. 主要討論什麼是 useRef , useRef 與 createRef 的區別, 以及在什麼狀況下使用 useRef .

什麼是 useRef

首先, 咱們要實現一個需求 -- 點擊 button 的時候 input 設置焦點.

createRef API

一樣的, 咱們可使用 useRef 來實現徹底相同的結果.

useRef Hook

從上面的例子看, createRef 和 useRef 的做用徹底同樣, 那爲何 react 要設計一個新的 hook ? 難道只是會了加上 use , 統一 hook 規範麼?

createRef 與 useRef 的區別

事實上, 只要你認真讀一下官方文檔, 就會發現, 它們兩個確實不同.

官網的定義以下: 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 在 react hook 中的做用, 正如官網說的, 它像一個變量, 它就像一個盒子, 你能夠存聽任何東西. createRef 每次渲染都會返回一個新的引用，而 useRef 每次都會返回相同的引用。

若是你還不太理解, 不要緊. 咱們再用一個例子來加深理解 createRef 和 useRef 的不一樣之處.

仔細看上面的代碼. 它會輸出什麼 ? 就算組件從新渲染, 因爲 refFromUseRef 的值一直存在(相似於 this ) , 沒法從新賦值. 運行結果以下:

demo 例子參考

什麼時候使用 useRef

爲何要設計 useRef 這個 API ? 咱們來結合實際的應用場景來看看. 看一個經典的例子.

你猜 alert 會彈出什麼? 是界面上 count 的實時狀態 ? 仍是在點擊 button 時 count 的快照 ?

爲何不是界面上 count 的實時狀態?

實際的實現原理複雜得多, 此處能夠先簡單的理解成下面的普通函數執行.

當咱們更新狀態的時候, React 會從新渲染組件, 每一次渲染都會拿到獨立的 count 狀態, 並從新渲染一個 handleAlertClick 函數. 每個 handleAlertClick 裏面都有它本身的 count .

既然這樣, 咱們就理解了上面的例子, alert 出來的值, 就是當時點擊時的 count 值.

如何讓點擊的時候彈出實時的 count ?

由於 useRef 每次都會返回同一個引用, 因此在 useEffect 中修改的時候 ,在 alert 中也會同時被修改. 這樣子, 點擊的時候就能夠彈出實時的 count 了.

上面的問題解決了, 咱們繼續, 咱們但願在界面上顯示出上一個 count 的值. 上代碼.

獲取上一個值, 這在實際場景中並很多, 咱們嘗試把它封裝成自定義 hook .

好了, 這樣子咱們就能夠在函數式組件中方便的獲取上一次的值. 這樣, 咱們就能夠簡單的實現類組件中 componentDidUpdate 獲取 prevProps 的值了.

總結

useRef 不單單是用來管理 DOM ref 的，它能夠存聽任何變量.
useRef 能夠很好的解決閉包帶來的不方便性. 你能夠在各類庫中看到它的身影, 好比 react-use 中的 useInterval , usePrevious …… 值得注意的是，當 useRef 的內容發生變化時,它不會通知您。更改.current屬性不會致使從新呈現。 由於他一直是一個引用 .

• 歡迎關注「前端加加」, 按期分享優質文章

• 回覆加羣，邀你進技術羣，長期技術交流學習