React 學習筆記5 — useRef 怎麼用？
在我們開發 react 的時候，通常都會建議大家不要去直接對 DOM 操作，透過改變 state 來觸發 UI 畫面的改變，或是希望所有動作都是 immutable，不要產生任何無法預期的 side effect。但其實在某些情況下，我們希望當某些資料被改的時候，不希望觸發畫面的 rerender，這時候我們就需要一個 mutableRefObject 來幫助我們。
Ref 是什麼
Ref 提供了一種可以取得 DOM 節點或在 render 方法內建立 React element 的方式。
其實簡單說，就是使用 ref 可以在 react 中拿到實際可以操作的 DOM element，且更改後不會像改變 state 一樣觸發 rerender。
如何使用
使用方法在 class component 中可以使用 createRef ，在 react hooks 中使用的會是 useRef ，元件上使用 ref 去關聯，用描述的可能很抽象，直接看下面常用情境怎麼使用。
常用情境
最常使用的情境就是讓 input focus 了
直接看官網上的例子，我們在 L2 使用 useRef 建立一個 default 為 null 的 inputEl，然後再 L9 使用 ref 將 input 與 inputEl 關聯起來，就可以在 react 內部直接操作這個 DOM element 了。
至於被關聯的 inputEl 會拿到什麼呢？直接 console 出來可以看到是放在 current 底下的 DOM element，你就可以對這個 element 直接操作做任何的事，直接給予 value 也是沒有問題的。
ref 與 state 的差異
我們都知道更改了 state，會觸發 rerender，而直接改變 ref 中 DOM 的內容，就不會觸發 rerender，可以簡單下面這個例子看：
我們多加上一個 count 的 state，當按下 Add count 會觸發 setCount 來對 count + 1，並且在 return function 利用 console 來看看有沒有 rerender。
其他關於 ref 的事
拿到 ref 後，也可以把它用 props 傳到別曾，去達成可能比較複雜邏輯，或許是一個父層的 input，被子層的某個行為觸發 focus。
在官方網站上，也有提供一些使用情境的建議：
有幾種適合使用 ref 的情況：
管理 focus、選擇文字、或影音播放。
觸發即時的動畫。
與第三方 DOM 函式庫整合。
但其實自己還是覺得盡量少用 ref 啦，或是盡量不要用在太複雜的情況下。因為透過 ref 更改的 DOM 並不會觸發 rerender，換句話說就是在 react 基於 state 的單向流中安插了後門，製造 side effect。可想而知，用得越多可能會造成本來單向流的 react 程式更難預測，當發生 bug 的時候相信就會不是很好去找。
