hooks 系列四：useRefs

快来加入咱们吧！

"小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至咱们官网小和山的菜鸟们 ( 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) {
    refForCreateRef.current = count
  }

  return (
    <> <div>如今count的值为：{count}</div> <div>refForUseRef的值为：{refForUseRef.current}</div> <div>refForCreateRef的值为：{refForCreateRef.current}</div> <button onClick={() => addCount((val) => val + 1)}>点击+1</button> </>
  )
}
复制代码

看一下效果，就算组件从新渲染，因为 refForUseRef 的值一直存在，因此没法从新赋值，这就是为何说，useRef 返回的对 ref 的引用是相同的，且在整个生命周期内保持不变。

useRef 在 Hook 中的做用

咱们都知道，Hook 的出现，让咱们能够在函数组件中就能够作到 Class 组件中的一些特性，咱们须要注意一点，Class 组件中有一个概念叫实例变量，那么基于 Hook 的函数组件存在相似实例变量吗？

答案是确定的，useRef Hook 不只能够用于 DOM refs，他还有一个重要的做用，就是容纳一个任意值的相似 Class 的实例属性，这也是前面提到的关于它的特性。

咱们仍是用一个例子，来感觉一下使用 useRef 的函数组件的魅力吧。

用例子感觉 useRef

不使用 useRef 的函数组件

function about() {
  const [count, addCount] = useState(0)

  function handleAlertClick() {
    setTimeout(() => {
      alert('弹框的count值:' + count)
    }, 2000)
  }

  return (
    <div> <div>如今count的值为：{count}</div> <button onClick={() => addCount((val) => val + 1)}>点击+1</button> <button onClick={() => handleAlertClick()}>展现弹框</button> </div>
  )
}
复制代码

观察这个例子的效果，咱们能够发现，弹框里的 count 值是在点击展现弹框按钮时的值，并非 count 的实时状态，这是为何呢？

其实，当咱们更新状态的时候，React 会从新渲染组件，每一次渲染都会拿到独立的 count 状态, 并从新渲染一个 handleAlertClick 函数. 每个 handleAlertClick 里面都有它本身的 count 。 因此每次弹框展现的就是点击时的 count 值。

如何让弹框里的值实时展现 count 值呢？

这个时候就用到了咱们一直在讨论的 useRef了，直接看例子：

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

  useEffect(() => {
    refForUseRef.current = count
  })

  function handleAlertClick() {
    setTimeout(() => {
      alert('弹框的count值:' + refForUseRef.current)
    }, 2000)
  }

  return (
    <div> <div>如今count的值为：{count}</div> <div>refForUseRef的值为：{refForUseRef.current}</div> <button onClick={() => addCount((val) => val + 1)}>点击+1</button> <button onClick={() => handleAlertClick()}>展现弹框</button> </div>
  )
}
复制代码

由于 useRef 每次都会返回同一个引用, 因此在 useEffect 中修改的时候 ,在 alert 中也会同时被修改. 这样子, 点击的时候就能够弹出实时的 count 了.

在这个例子中，count 就相似于 Class 组件中的实例变量，useRef 让咱们在函数组件中完成一些 Class 组件的功能。

总结

经过这一篇文章，咱们了解到了 React Hook 为咱们带了的一个钩子 useRef ，它返回的 ref 对象在组件的整个生命周期保持不变，让咱们在函数组件中，也能够像 Class 组件同样保存一些实例属性，为咱们开发带来了许多可能性，除了这些新奇的功能，不要忘记 ref 开始获取 DOM 属性的功能，由于在 useRef 一样能够适用。

下节预告

在下节中，咱们将为你们介绍 useCallBack ，敬请期待！