Question

以下哪项是关于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' */
}

使用箭头功能代替普通功能：

constructor(props)
{
    /* some code */
}

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

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

坚持正常功能但在onChange字段中声明箭头功能：

constructor(props)
{
    /* some code */
}

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

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

谢谢！

Answer 1

关于this的所有3个选项都表现相同。

选项3在每个渲染上创建一个新函数，因此不如选项1和2更好（因为这种重新创建是不必要的，可能会阻碍性能）

就选项1和2而言，它们归结为相同的行为，与this的行为无关的轻微差异。

了解它们与this行为相同的原因的技巧是知道以下代码的作用：

method = () => {}

将一个方法添加到实例只是语法糖：

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

// is the same as

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

了解Babel transpiles it。

的方式

由于箭头函数inherits the context it is defined in为this，因此选项2的上下文是类本身。

＆＃13;

class A {
  constructor() {
    this.method = () => {
      return this;
      //     ^^^^ this points to the instance of A
    }
  }
}

const a = new A();
console.log(a.method() === a); // true

＆＃13;

选项1的内容相同：

＆＃13;

class A {
  constructor() {
    this.method = this.method.bind(this);
  }
  method() {
    return this;
    //     ^^^^ this points to the instance of A
  }
}

const a = new A();
console.log(a.method() === a); // true

＆＃13;

这意味着你的选择归结为：

之间的区别

// option 1
constructor(props) {
  this.onChange = this.onChange.bind(this)
}

onChange() {
 // code for onChange...
}

和

// option 2
constructor(props) {
  this.onChange = () => /* code for onChange */
}

我给选项1的主要优点是它有一个命名函数而不是箭头函数，这使得在检查堆栈跟踪时调试更容易一些（虽然function name inferences稍微淡化了这一点）。 / p>

我给选项2的主要优点是它有点“干净”＆＃34;看起来像一个不那么冗长的代码，但这是一个主观的意见。

总的来说，选项1和选项2实际上是无关紧要的。

React中有关上下文“this`

1 个答案: