其他分享
首页 > 其他分享> > 浅谈 useRef

浅谈 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 框也会重新聚焦

        7人点赞   日记本      

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

标签:useRef,浅谈,渲染,按钮,点赞,input,ref
来源: https://www.cnblogs.com/sexintercourse/p/14769711.html