React如何调用ES6类的呈现函数，使“this”不引用类本身

Question

例如，给定函数为increaseQty 的类

increaseQty() {
  this.qty++
}

和呼叫

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

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

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的哪个方面使得在没有this上下文的情况下调用render？

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中），那么它将抛出一个错误。不能将1添加到undefined。

在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++;

很好。