zoukankan      html  css  js  c++  java
  • 浅谈 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
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
    漫思
  • 相关阅读:
    linux命令(14):ifup/ifdown/ip addr命令
    linux命令(13):kill/killall命令
    linux命令(12):ping命令
    linux命令(11):df命令
    linux命令(9):route命令
    npm安装node-sass报msbuild相关错误的解决办法
    'vue-cli-service' 不是内部或外部命令,也不是可运行的程序 或批处理文件。
    redis发布与订阅的实现
    设计模式-工厂模式
    设计模式的介绍
  • 原文地址:https://www.cnblogs.com/sexintercourse/p/14769711.html
Copyright © 2011-2022 走看看