开始之前我们先看一个例子
代码如下：
注意，这个 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 框也会重新聚焦
作者：再见地平线_e930
链接：https://www.jianshu.com/p/34b445a15494
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。