hooks 系列四：useRefs

快来加入我们吧！

"小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.com/ ) 进行学习，及时获取最新文章。

"Code tailor" ，如果您对我们文章感兴趣、或是想提一些建议，微信关注 “小和山的菜鸟们” 公众号，与我们取的联系，您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励！

前言

这篇文章，我们主要目的是了解一下 useRefs 的使用.

useRefs

定义

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。

const refContainer = useRef(initialValue)

我们都知道，React 已经提供了一个 API createRef，它的作用同样也是创建一个 ref，那么这个 useRefs Hook 出来的意义是什么呢？它们之间又有什么区别呢？

useRef 的特性

useRef 一个很重要的特性就是：useref 返回的 ref 对象是可变的。正如官网文档中所说，它像一个变量，像可以保存一个可变值的“盒子”。

我们已经知道的 createRef 返回的 ref 对象在每次渲染时都会返回一个新的引用，而 useRef 则返回的是相同的引用 也正如定义中所说，返回的 ref 对象在组件的整个生命周期内保持不变。这也是为什么 useRef 可以在其 .current 属性中保存一个可变值的重要原因。

可能这比较难以理解，那我们用一个例子来理解一下：

function about() {
   
  const [count, addCount] = useState(0)
  const refForUseRef = useRef()
  const refForCreateRef = createRef()

  if (!refForUseRef.current) {
   
    // 如果不存在则赋值
    refForUseRef.current = count
  }
  if (!refForCreateRef.current