useRef 也是 React Hooks 的一种,它的作用是提供一个可以在函数式组件中访问的全局变量,而不必渲染组件。它接受一个参数,即初始参考值,并返回一个可以访问和修改的 Ref 对象。它的一个主要用途是操作 DOM 元素,因为它可以让您在函数式组件中操作 DOM 元素而不必使用原生 JavaScript 或者使用类似 jQuery 之类的库。
两者之间最大的区别是 useState 用于管理状态,而 useRef 用于操作 DOM 元素。另外,useState 返回的是当前状态和一个更新状态的函数,而 useRef 返回的是一个全局可以访问和修改的 Ref 对象。useState 用于保存和更新组件的状态,而 useRef 用于引用 DOM 元素或者保存值。useState 的值会被重新渲染,而 useRef 的值不会。
useState的值在每个rernder中都是独立存在的,而useRef.current则更像是相对于render函数的一个全局变量,每次他会保持render的最新状态。(useState异步更新其值,useRef同步更新)
useState触发重新渲染,useRef不触发。
useRef() 不仅用于DOM引用。“ ref”对象是通用容器,其当前属性是可变的,并且可以保存任何值,类似于类的实例属性。
变量是决定视图图层渲染的变量,请使用useState,其他用途useRef
useRef特性:可变的ref对象,持久化。