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事件绑定的一些见解,如有不对的地方,希望各路大神能提出来,让小弟能涨涨见识

  • 相关阅读:
    ci中使用smarty
    php curl用法
    百万级访问网站前期的技术准备
    enctype="multipart/formdata" 文件上传
    【转】lnmp配置记录
    ActionScript实现两直线相交弧跨越算法
    Adobe Flex迷你教程 — ActionScript实现二维向量运算
    U盘启动安装Linux(转)
    Adobe Flex迷你教程 — 实现类似新浪微博评论消息容器
    Adobe Flex迷你教程 — 让Graphics的线响应事件。
  • 原文地址:https://www.cnblogs.com/wzcsqaws/p/10900145.html
Copyright © 2011-2022 走看看