React 如何调用 ES6 类的渲染函数，使得 `this` 不引用类本身？

Question

例如，给定具有函数 increaseQty 的类

increaseQty() {
  this.qty++
}

和电话

render() {
  return (
    <div>
      <button onClick={this.increaseQty}>Increase</button>
    </div>
  )
}

除非我在构造函数中写一行将构造函数中this 的上下文绑定到函数，否则this.qty 将是未定义的

constructor(props) {
  super(props)
  this.qty = 0
  this.increaseQty = this.increaseQty.bind(this) // <---- like so
}

但是，如果您只是正常使用它，那么在普通的 es6 类中情况并非如此：

https://jsfiddle.net/omrf0t20/2/

class Test {
  constructor() {
    this.qty = 0
  }

  increaseQty() {
    console.log(++this.qty)
  }

  doStuff() {
    this.increaseQty()
  }
}

const t = new Test()
t.doStuff() // prints 1

React 的什么方面使得 render 在没有 this 上下文的情况下被调用？

Answer 1

这里的区别在于，在您使用 React 的示例中，您将 increaseQty 作为回调传递给另一个组件，但在第二个中，您是在当前上下文中调用它。

您可以在简化示例中看到这里的区别

class Test {
  constructor() {
    this.qty = 0
  }

  increaseQty() {
    console.log(++this.qty)
  }

  doStuff() {
    this.increaseQty(); // no need to bind
  }

  listenClicks() {
    // you should use bind to preserve context
    document.body.addEventListener('click', this.increaseQty.bind(this)); 
  }
}

React 指南还建议您在构造函数中绑定方法，以使代码更优化，绑定一次并始终使用相同的函数，而不是为每个 render() 调用创建一个新的绑定版本。

Answer 2

这并不是一个真正的 ES6 特定问题（除了我们引用一个类和构造函数的事实）。您在函数中所做的只是增加一个值。如果该值没有被初始化（即使在 ES5 中），那么它会抛出一个错误。 undefined 不能加 1。

在 ES5（实际上是 ES6）中，这将是一个问题：

var myObj = {
    addOne: function() {
        this.qty++;
    }
}

myObj.addOne(); // Error! this.qty is undefined

而这会解决它：

var myObj = {
    qty: 0,
    addOne: function() {
        this.qty++;
    }
}

myObj.addOne(); // Good to go

你们班的情况也一样。您不能将尚未声明并初始化为数值的变量递增。

在一个更简单的例子中：

var x;

x++;

会抛出一个错误，而这个：

var x = 0;

x++;

很好。