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()调用创建新的绑定版本。

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

1 个答案: