关于环境`this`的React的最佳实践 [英] Best practice in React regarding the context `this`

问题描述

以下哪项是关于React类组件性能的最佳做法：

Which of the following is the best practice with regard to performance in a React class component:

1. 绑定回拨构造函数中的函数：

1. Binding a call back function in the constructor:

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

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

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

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

Using an arrow function instead of a normal function:

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

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

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

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

Sticking to a normal function but declaring an arrow function in the onChange field:

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

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

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

谢谢！

推荐答案

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

All 3 options, with regards to this, behave the same.

选项3正在创建每个渲染的新功能，因此不如选项1和2（因为这种重新创建是不必要的，可能会妨碍性能）

Option 3 is creating a new function on every render and is thus less desired than options 1 and 2 (since such re-creation is unnecessary and could potentially hinder performance)

至于选项1 2，它们归结为相同的行为，与这个的行为无关的轻微差异。

As far as options 1 and 2, they come down to the same behavior with slight differences unrelated to the behavior of this.

诀窍理解为什么他们的行为与相同是知道以下代码的作用：

The trick to understanding why they behave the same with this is to know what the following code does:

method = () => {}

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

It's just syntactic sugar to add a method to an instance:

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

// is the same as

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

了解 Babel transiles it 。

由于箭头函数继承其定义的上下文为 this ，选项2的上下文是类本身。

Since an arrow function inherits the context it is defined in as this, the context for option 2 is the class itself.

class A {
  constructor() {
    this.method = () => {
      return this;
      //     ^^^^ this points to the instance of A
    }
  }
}

const a = new A();
console.log(a.method() === a); // true

选项1的内容相同：

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

这意味着您的选择可归结为：

That means your options come down to the difference between:

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

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

和

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

我将给予选项1的主要优势是它有一个命名函数而不是箭头函数，这使得在检查堆栈跟踪时调试更容易一些（尽管函数名称推断稍微淡化了这一点。）

The main advantage I would give to option 1 is that it has a named function instead of an arrow function, which makes debugging a bit easier when examining stack traces (although function name inferences dilutes this point a bit).

主要优势我会给选项2带来的是它看起来有点干净，就像在较不详细的代码中那样，但这是一种主观意见。

The main advantage I would give to option 2 is that it's a bit "cleaner" looking, as in less verbose, code but that is a subjective opinion.

总体而言，选项1和选项2几乎无动于衷。

Overall, option 1 and option 2 are practically indifferent.

这篇关于关于环境`this`的React的最佳实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！