React Hooks — useRef

136 阅读1分钟

useRef 会返回一个可变的 ref 对象,对象中只有 current 属性(可修改),当更新 current 的值时不会重新 render。(useState 会重新 render)

在 React 中,useRef() 有两种使用场景,第一种是用来获取 元素的实例

  • 这种获取方式,需要保证 ref 绑定的变量与 useRef() 声明的变量同名
  • 打印出来的 myRef.current,是对应元素的 DOM

image.png

第二种是来用来定义变量,并且可以跨渲染取到状态值:

let num = useRef(0);
 
<button onClick={() => { num.current = num.current + 1; }} > 点击了 {num.current} 次 </button>

注:vue3 中的 ref() ,当没有绑定到 ref 的时候,和 React 中的 useRef 是完全不同的含义,这时 vue3 中的 ref() 的作用相当于 React 中的 useState()

image.png