Javascript React中关于“此”上下文的最佳实践`

关于React类组件的性能，以下哪项是最佳实践：

在构造函数中绑定回调函数：

constructor(props)
{
    /* some code */
    this.onChange= this.onChange.bind(this)
}

render() {
   return(
      <div>
          <input onChange={this.onChange}
      </div>
   );
}

onChange(event) {
/* some code involving 'this' */
}

构造函数（道具）
{
/*一些代码*/
this.onChange=this.onChange.bind（this）
}
render（）{
返回(
关于此

，所有3个选项的行为相同

选项3在每个渲染上创建一个新函数，因此不如选项1和2所需（因为这样的重新创建是不必要的，并且可能会影响性能）

至于选项1和选项2，它们归结为相同的行为，但与

this

的行为略有不同

要理解它们为何与

此

行为相同，关键在于了解以下代码的作用：

method = () => {}

将方法添加到实例只是一种语法上的糖分：

class A {
  method = () => {}
}

// is the same as

class A {
  constructor() {
    this.method = () => {}
  }
}

看看怎么做

由于箭头函数为this，因此选项2的上下文是类本身

A类{
构造函数（）{
this.method=（）=>{
归还这个；
//^^^^^这指向
}
}
}
常数a=新的a（）；
console.log（a.method（）==a）；//true

数字2和3可能无法按预期的方式工作；箭头函数不绑定它们自己的

this

。我选择1。@castis“箭头函数不绑定它们自己的this”，这就是为什么2和3会完全按预期工作的原因：）第三种方法不是一个好主意，因为每次调用render时它都会创建一个新函数，您也可以检查这一点，第一种方法和第三种方法是等价的，在#3中，构造函数初始化是不必要的，因为

this.onChange（event）

处理程序中的调用上下文无论如何都会被正确设置。你是对的，我从选项1复制粘贴后忘记删除它：-）谢谢你给出了非常详细的答案！！所以选项1和选项2在性能方面是相同的？是的，在实际意义上。这意味着它们的性能差异是最小的。选项1确实有一个额外的fu在原型上的操作，当实例化它时，每个实例上都会用到它，但这只是一个额外的功能，不应该是一个问题。

method = () => {}

class A {
  method = () => {}
}

// is the same as

class A {
  constructor() {
    this.method = () => {}
  }
}