zoukankan      html  css  js  c++  java
  • react的每个方法为什么一定要bind this

    一开始学习react的时候就了解了react的每个方法都要bind(this)或者使用箭头函数绑定this的指向,到底是为什么要这么写呢,当时要学习的东西太多了就没在意,今天特别好奇(不搞懂不吃饭的态度),就深入学习一下

    SyntheticEvent是个什么东西

    react官网有一节介绍了SyntheticEvent,大家可以去官网了解一下,我也就是简单了解了一下,dom树上绑定事件是耗性能的,一个页面,如果你在dom节点上绑了很多事件,但是用户就点了几个按钮,那其他事件绑上去岂不是浪费了?
    react就考虑到了这一点,你在render里绑定的事件并不是真的绑在真实dom上的(绑在虚拟dom上),而是在document这个根节点上绑了个SyntheticEvent,当用户点击的时候事件冒泡到document上,SyntheticEvent收到后再在真实dom上通过
    回调(回调是重点)执行你在render上绑定的事件。
    当然SyntheticEvent还解决了浏览器兼容性的问题。

    this的指向

    <button onClick={this.add}>add</button>
    

    一个button绑定了组件中(this中)一个叫add的方法,前面说了SyntheticEvent被触发时是回调this里面的add方法,也就是说执行add方法并不是当前组件这个this,自然add方法里也获取不到当前组件这个this了,所以需要你自己去绑定上去啦。
    回调可能还有些不理解,这里有个例子

    class Cat {
     sayThis () {
     console.log(this); // 这里的 `this` 指向谁?
      }
    
     exec (cb) {
     cb();
      }
    
     render () {
     this.exec(this.sayThis);
      }
    }
    
    const tom = new Cat();
    tom.render(); // 输出结果是什么?
    

    网上抄的例子,大家看一下例子应该明白了什么叫回调会改变this了

    以上就是本人对react事件绑定的一些见解,如有不对的地方,希望各路大神能提出来,让小弟能涨涨见识

  • 相关阅读:
    在Visual Studio 2015中引用DLL的3种方法
    在Qt中使用大漠插件
    wprintf、wcout无法输出中文的解决方案
    在安卓6.0(及以上)设备上无法获取无线网卡MAC地址的解决方案
    使用Java绘制验证码
    adb常用命令整理
    Java中数组复制的几种方式以及数组合并
    在Qt Creator中为Qt工程添加资源
    使用POCO发送HTTP(S)请求
    使用Qt发送HTTPS请求
  • 原文地址:https://www.cnblogs.com/wzcsqaws/p/10900145.html
Copyright © 2011-2022 走看看