你不知道的 useRef
The following article is from 前端加加 Author 广州peen
（给前端大全加星标，提升前端技能）
作者： 前端加加 公号 / 广州peen （本文来自作者投稿）
首先, 我们要实现一个需求 -- 点击 button 的时候 input 设置焦点.
createRef API
同样的, 我们可以使用 useRef 来实现完全相同的结果.
useRef Hook
从上面的例子看, createRef 和 useRef 的作用完全一样, 那为什么 react 要设计一个新的 hook ? 难道只是会了加上 use , 统一 hook 规范么?
事实上, 只要你认真读一下官方文档, 就会发现, 它们两个确实不一样.
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.
如果你还不太理解, 没关系. 我们再用一个例子来加深理解 createRef 和 useRef 的不同之处.
仔细看上面的代码. 它会输出什么 ?
就算组件重新渲染, 由于 refFromUseRef 的值一直存在(类似于 this ) , 无法重新赋值. 运行结果如下:
为什么要设计 useRef 这个 API ? 我们来结合实际的应用场景来看看. 看一个经典的例子.
你猜 alert 会弹出什么?
是界面上 count 的实时状态 ? 还是在点击 button 时 count 的快照 ?
为什么不是界面上 count 的实时状态?
实际的实现原理复杂得多, 此处可以先简单的理解成下面的普通函数执行.
如何让点击的时候弹出实时的 count ?
因为 useRef 每次都会返回同一个引用, 所以在 useEffect 中修改的时候 ,在 alert 中也会同时被修改. 这样子, 点击的时候就可以弹出实时的 count 了.
上面的问题解决了, 我们继续, 我们希望在界面上显示出上一个 count 的值. 上代码.
获取上一个值, 这在实际场景中并不少, 我们尝试把它封装成自定义 hook .
好了, 这样子我们就可以在函数式组件中方便的获取上一次的值. 这样, 我们就可以简单的实现类组件中 componentDidUpdate 获取 prevProps 的值了.
觉得本文对你有帮助？请分享给更多人
关注「前端大全」加星标，提升前端技能
好文章，我在看❤️