我知道有3种方法可以在类中声明方法。我曾经使用React.create类，但我决定用较新的语法 - ES6进行炒作。
我承认我对 es6 知之甚少。有 3 种方法可以绑定此关键字。
1.
class myClass extends Components {
constructor(props){
super()
this.doSomething = this.doSomething.bind(this)
}
doSomething(){
}
render(){
return(<div onClick={this.doSomething}>click me</div>)
}
}
阿拉伯数字。
class myClass extends Components {
constructor(props){
super()
}
doSomething(){
}
render(){
return(<div onClick={this.doSomething.bind(this)}>click me</div>)
}
}
3.
class myClass extends Components {
constructor(props){
super()
}
doSomething(){
}
render(){
return(<div onClick={e => this.doSomething}>click me</div>)
}
}
我的问题是这些不同的做事方式彼此有何不同？
简而言之，选项 1 在构造函数中绑定this，因此每次使用组件时，绑定仅发生一次。这是以必须编写构造函数为代价的，否则可能没有必要。
选项 2 和 3 使用不同的语法实现相同的操作，每次呈现组件时都会创建一个绑定this的新函数。
你的选项 3 实际上应该调用函数doSomething，即e => this.doSomething().就个人而言，我要么将事件e传递给函数，要么e更改为()以明确匿名函数没有使用任何参数。
第一个选项的效率略高，因为您不会在每个渲染上创建新函数，但我倾向于使用选项 3，因为它看起来更好，而且我从未注意到它有任何真正的性能问题。轮到你了。
顺便说一句，如果你使用createClass那么 React 会为你处理方法中this的绑定，这是在评估使用哪种方法时要考虑的事情。
作为你的问题。
方法 1 是使用构造函数中定义的函数。
此方法是前一种方法与类构造函数的混合
。您不必再在JSX中使用bind()，但这会带来增加构造函数代码大小的成本。
方法 2是使用 Function.prototype.bind()。
由于 ES6 类的任何方法都是纯 JavaScript 函数，因此它从函数原型继承bind()。所以现在当我们在JSX中调用increaseQty()时，这将指向我们的类实例。您可以在这篇 MDN 文章中阅读有关Function.prototype.bind()的更多信息。
方法 3是使用胖箭头函数和构造函数。
ES6 胖箭头函数在调用时会保留此上下文。我们可以使用此功能并在构造函数中重新定义doSomething()。
这些是作用域函数的示例。
https://ariya.io/2013/05/es6-and-block-scope
所以对于第一个实例
onClick={this.doSomething}
onClick 超出了类的范围。 所以绑定是必需的。 所以在它里面调用这个将引用 React 元素 (div)
二审
onClick={this.doSomething.bind(this)}
基本相同。 现在，您绑定了来自 onClick 调用方的this。这恰好是类。
三审
onClick={e => this.doSomething}
使用箭头会改变函数的上下文，因此从this引用div，它变成了this引用类
奖金实例
doSomething = () => {}
称呼它为喜欢
onClick={ this.doSomething }