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

代码如下：

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