你不知道的 useRef

前言: 这篇文章会假设你已经对 react hook 有一些基础的了解. 主要讨论什么是 useRef , useRef 与 createRef 的区别, 以及在什么状况下使用 useRef .

什么是 useRef

首先, 咱们要实现一个需求 -- 点击 button 的时候 input 设置焦点.

createRef API

一样的, 咱们可使用 useRef 来实现彻底相同的结果.

useRef Hook

从上面的例子看, createRef 和 useRef 的做用彻底同样, 那为何 react 要设计一个新的 hook ? 难道只是会了加上 use , 统一 hook 规范么?

createRef 与 useRef 的区别

事实上, 只要你认真读一下官方文档, 就会发现, 它们两个确实不同.

官网的定义以下: useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

换句人话说 , useRef 在 react hook 中的做用, 正如官网说的, 它像一个变量, 它就像一个盒子, 你能够存听任何东西. createRef 每次渲染都会返回一个新的引用，而 useRef 每次都会返回相同的引用。

若是你还不太理解, 不要紧. 咱们再用一个例子来加深理解 createRef 和 useRef 的不一样之处.

仔细看上面的代码. 它会输出什么 ? 就算组件从新渲染, 因为 refFromUseRef 的值一直存在(相似于 this ) , 没法从新赋值. 运行结果以下:

demo 例子参考

什么时候使用 useRef

为何要设计 useRef 这个 API ? 咱们来结合实际的应用场景来看看. 看一个经典的例子.

你猜 alert 会弹出什么? 是界面上 count 的实时状态 ? 仍是在点击 button 时 count 的快照 ?

为何不是界面上 count 的实时状态?

实际的实现原理复杂得多, 此处能够先简单的理解成下面的普通函数执行.

当咱们更新状态的时候, React 会从新渲染组件, 每一次渲染都会拿到独立的 count 状态, 并从新渲染一个 handleAlertClick 函数. 每个 handleAlertClick 里面都有它本身的 count .

既然这样, 咱们就理解了上面的例子, alert 出来的值, 就是当时点击时的 count 值.

如何让点击的时候弹出实时的 count ?

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

上面的问题解决了, 咱们继续, 咱们但愿在界面上显示出上一个 count 的值. 上代码.

获取上一个值, 这在实际场景中并很多, 咱们尝试把它封装成自定义 hook .

好了, 这样子咱们就能够在函数式组件中方便的获取上一次的值. 这样, 咱们就能够简单的实现类组件中 componentDidUpdate 获取 prevProps 的值了.

总结

useRef 不单单是用来管理 DOM ref 的，它能够存听任何变量.
useRef 能够很好的解决闭包带来的不方便性. 你能够在各类库中看到它的身影, 好比 react-use 中的 useInterval , usePrevious …… 值得注意的是，当 useRef 的内容发生变化时,它不会通知您。更改.current属性不会致使从新呈现。 由于他一直是一个引用 .

• 欢迎关注「前端加加」, 按期分享优质文章

• 回复加群，邀你进技术群，长期技术交流学习