【前端新手日记】React.js学习笔记— React的useRef vs Vue3的ref
【前端新手日记】React.js学习笔记— React的useRef vs Vue3的ref
在学习React的时候，有发现一个hook跟Vue3世界里面一个很重要的api的名字很类似，那就是useRef。虽然React的useRef因为名字的关系，看起来好像跟Vue3的ref是一样的东西，但是仔细了解之后，才发现并不是这样的呀！
Vue3 与 React
视图 3 - 参考
其实Vue3的ref会比较像是React的useState，因为主要是在处理state，让state的更新变得更方便，使用上跟data有关。不过除了这个主要的用法外，还有储存DOM元素来操控的使用情境，这部分就稍微和React的useRef有点相似。另外，一个比较需要提的部分是 「Vue3世界中，被用ref宣告的state如果使用在画面上，当这个state有变化时，会让画面重新render」 。
使用方式
宣告一个带响应式的state，只要用以下的方式即可。
ref()可以带入预设值，下图预设值为”text”。
如果要变更这个state，则需要透过 。价值 来改动，像是以下这样。
使用情境
再来看一下使用情境。
主要有以下两种：
1. 宣告响应式state： 这边也就是前面所提到的，跟react的useState类似的功能，都是用来宣告state来使用。
2. 需要取得DOM时： 这个使用情境可以搭配在HTML上，用ref属性绑上用ref宣告的state，例如下图这样。
取得DOM后，就可以利用inputRef这个state来进一步操控，例如下图这样。
按下按钮后，就可以让input变成focus状态。
取得DOM后，除了这样使用外，也可以活用在其他相关的用法上。
补充：Vue2也有ref这种取得DOM的用法，但使用方式有点不同，这里的范例是以Vue3为主。
反应——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，所以想要进行变更时，需要透过 。当前的 改动。
使用情境
1. 保存不需要触发再次渲染的data(例如：timerId)
2. 取得并操控DOM
例如：按下按钮将input切换为focus状态
使用方式跟Vue3的方式很像，也是需要用ref属性绑上用useRef宣告的变数。
3. 取得input的value(也就是做出vue v-model的功能)
为什么不会重新渲染？
为什么使用useRef不会重新渲染， 是因为最后回传的会是一个object，object的特性是by reference，改了里面current属性的值，并不会改变他的记忆体参照位址，所以对javascript来说，还是同一个东西，不会重新渲染。 不过如果眼尖的话，应该会发现Vue3不也不是单纯的值，是一个物件，那为什么改变 。价值 的值，却又会重新渲染呢？ Vue3的ref是以poxry下去呈现响应式，并且会在set值的时候，透过副作用来触发重新渲染，所以才会再改动后，有重新渲染的效果。
Vue3 ref和React useRef的差异
最后总结一下这两者的差异。
以上就是这次突发奇想(?)，想要来比较一下差异的ref和useRef小笔记。
打完收工！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
