码迷,mamicode.com
首页 > 其他好文 > 详细

浅谈 useRef

时间:2021-05-24 09:40:31      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:index   tcl   current   strong   settime   使用   cli   data   例子   

开始之前我们先看一个例子

代码如下:

注意,这个 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 框也会重新聚焦

 
技术图片
 
 
 
7人点赞
 
 
 


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

浅谈 useRef

标签:index   tcl   current   strong   settime   使用   cli   data   例子   

原文地址:https://www.cnblogs.com/sexintercourse/p/14769711.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!