文科少女學程式

在學習React的時候，有發現一個hook跟Vue3世界裡面一個很重要的api的名字很類似，那就是useRef。雖然React的useRef因為名字的關係，看起來好像跟Vue3的ref是一樣的東西，但是仔細了解之後，才發現並不是這樣的呀！

Vue3 vs React
Vue3 - ref
其實Vue3的ref會比較像是React的useState，因為主要是在處理state，讓state的更新變得更方便，使用上跟data有關。不過除了這個主要的用法外，還有儲存DOM元素來操控的使用情境，這部分就稍微和React的useRef有點相似。另外，一個比較需要提的部分是「Vue3世界中，被用ref宣告的state如果使用在畫面上，當這個state有變化時，會讓畫面重新render」。

使用方式
宣告一個帶響應式的state，只要用以下的方式即可。
ref()可以帶入預設值，下圖預設值為"text"。

如果要變更這個state，則需要透過.value來改動，像是以下這樣。


使用情境
再來看一下使用情境。
主要有以下兩種：
1. 宣告響應式state：這邊也就是前面所提到的，跟react的useState類似的功能，都是用來宣告state來使用。
2. 需要取得DOM時：這個使用情境可以搭配在HTML上，用ref屬性綁上用ref宣告的state，例如下圖這樣。

取得DOM後，就可以利用inputRef這個state來進一步操控，例如下圖這樣。

按下按鈕後，就可以讓input變成focus狀態。

取得DOM後，除了這樣使用外，也可以活用在其他相關的用法上。
補充：Vue2也有ref這種取得DOM的用法，但使用方式有點不同，這裡的範例是以Vue3為主。

React - useRef
React世界的useRef使用從表面上來看和react的useState和vue3的ref很像，不過它主要用途是「儲存、記憶」某個東西(包含變數值、DOM等)。但如果要使用在畫面上，讓畫面隨著這個state變動而重新渲染的話，就不能使用useRef了，因為使用useRef，會回傳一個key為current的object，雖然改變了value，但是因為object的by reference特性，reference沒有變動，所以也就不會重新渲染。

使用方式
用useRef宣告值，useRef()可帶入預設值。下圖預設值為1。

因為回傳的內容會是一個key為current的object，所以想要進行變更時，需要透過.current改動。

使用情境
1. 保存不需要觸發再次渲染的data(例如：timerId)


2. 取得並操控DOM
例如：按下按鈕將input切換為focus狀態
使用方式跟Vue3的方式很像，也是需要用ref屬性綁上用useRef宣告的變數。

3. 取得input的value(也就是做出vue v-model的功能)

為什麼不會重新渲染？
為什麼使用useRef不會重新渲染，是因為最後回傳的會是一個object，object的特性是by reference，改了裡面current屬性的值，並不會改變他的記憶體參照位址，所以對javascript來說，還是同一個東西，不會重新渲染。不過如果眼尖的話，應該會發現Vue3不也不是單純的值，是一個物件，那為什麼改變.value的值，卻又會重新渲染呢？Vue3的ref是以poxry下去呈現響應式，並且會在set值的時候，透過副作用來觸發重新渲染，所以才會再改動後，有重新渲染的效果。

Vue3 ref和React useRef的差異
最後總結一下這兩者的差異。


以上就是這次突發奇想(?)，想要來比較一下差異的ref和useRef小筆記。
打完收工！