标签：useRef 浅谈 渲染 按钮 点赞 input ref

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

代码如下：

注意，这个 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。