浅谈 useRef
作者:互联网
开始之前我们先看一个例子
代码如下:
注意,这个 alert 方法是放在 setTimeout 被延迟了 2S 才执行
![](http://upload-images.jianshu.io/upload_images/22774661-c0c46a5a50a499a9.png?imageMogr2/auto-orient/strip|imageView2/2/w/674/format/webp)
渲染出来的页面是这样的:
![](http://upload-images.jianshu.io/upload_images/22774661-69e6806dc573c13d.png?imageMogr2/auto-orient/strip|imageView2/2/w/1026/format/webp)
一开始,当我们点击 Alert 按钮,然后猛点那个点赞按钮,你觉得最后的弹框会提示你点击了几次?
1次,还是多次?
答案是1次
![](http://upload-images.jianshu.io/upload_images/22774661-4729b0052fb9ef5c.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
可以看见,按钮上显示的点击次数是13,而弹框显示的次数是1
你会疑问,为什么不是13呢?明明 在这个 handleAlertClick 方法中拿到就是 like 值啊
因为,在任意一次渲染中,props和 state 是始终保持不变的,如果props和state在任不同渲染中是相互独立的话,那么使用到他们的任何值也是独立的,就比如上面的 handleAlertClick 这个事件处理函数
那么有没有可能让不同的渲染之间发生某种联系呢?
答案: useRef
useRef
很重要的一点就是他的 current 属性
![](http://upload-images.jianshu.io/upload_images/22774661-323b01b3c7cf51e5.png?imageMogr2/auto-orient/strip|imageView2/2/w/778/format/webp)
ref 在所有 render 都保持着唯一的引用,因此所有的对 ref 的赋值或者取值拿到的都是一个 最终 的状态,而不会存在隔离
修改刚才的代码:
![](http://upload-images.jianshu.io/upload_images/22774661-f4459ddcea152c77.png?imageMogr2/auto-orient/strip|imageView2/2/w/826/format/webp)
运行结果,猛点 Alert 按钮,然后点点赞按钮
![](http://upload-images.jianshu.io/upload_images/22774661-13012d4e60fc4f2c.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
会发现这里的点赞次数和 alert 弹框的次数是一样的
需要注意的是,修改 ref 的值是不会引发组件的重新 render
useRef非常常用的一个操作,访问DOM节点,对DOM进行操作,监听事件等等:
举个例子,使用 useRef 配合 useEffect 使 input 输入框聚焦
![](http://upload-images.jianshu.io/upload_images/22774661-6bdeb270c4a2e62a.png?imageMogr2/auto-orient/strip|imageView2/2/w/821/format/webp)
第一次进入页面,input 输入框自动聚焦,当点击点赞按钮,就会重新渲染页面,input 框也会重新聚焦
![](http://upload-images.jianshu.io/upload_images/22774661-336085028de59e6f.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
作者:再见地平线_e930
链接:https://www.jianshu.com/p/34b445a15494
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
标签:useRef,浅谈,渲染,按钮,点赞,input,ref 来源: https://www.cnblogs.com/sexintercourse/p/14769711.html