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