浅谈 useRef

Posted 2021-05-14 漫思

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

代码如下：

注意，这个 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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。