浅谈 useRef
开始之前我们先看一个例子
代码如下:
注意,这个 alert 方法是放在 setTimeout 被延迟了 2S 才执行

渲染出来的页面是这样的:

一开始,当我们点击 Alert 按钮,然后猛点那个点赞按钮,你觉得最后的弹框会提示你点击了几次?
1次,还是多次?
答案是1次

可以看见,按钮上显示的点击次数是13,而弹框显示的次数是1
你会疑问,为什么不是13呢?明明 在这个 handleAlertClick 方法中拿到就是 like 值啊
因为,在任意一次渲染中,props和 state 是始终保持不变的,如果props和state在任不同渲染中是相互独立的话,那么使用到他们的任何值也是独立的,就比如上面的 handleAlertClick 这个事件处理函数
那么有没有可能让不同的渲染之间发生某种联系呢?
答案: useRef
useRef
很重要的一点就是他的 current 属性

ref 在所有 render 都保持着唯一的引用,因此所有的对 ref 的赋值或者取值拿到的都是一个 最终 的状态,而不会存在隔离
修改刚才的代码:

运行结果,猛点 Alert 按钮,然后点点赞按钮

会发现这里的点赞次数和 alert 弹框的次数是一样的
需要注意的是,修改 ref 的值是不会引发组件的重新 render
useRef非常常用的一个操作,访问DOM节点,对DOM进行操作,监听事件等等:
举个例子,使用 useRef 配合 useEffect 使 input 输入框聚焦

第一次进入页面,input 输入框自动聚焦,当点击点赞按钮,就会重新渲染页面,input 框也会重新聚焦

作者:再见地平线_e930
链接:https://www.jianshu.com/p/34b445a15494
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
漫思