React是否在setState回调中绑定它？

Question

我期待看到undefined被记录在“没有约束力”被点击按钮，因为当你明明白白传递方法引用作为回调，不应该用正确的叫this背景下，但有一个箭头的功能，它应该 。

但是，我看到回调函数可以访问this并且this.state.number的值已正确记录。 方法参考和箭头功能执行的操作完全相同。 为什么？

这与箭头函数类的属性无关，而与传递对方法的引用作为setState （而不是箭头函数）的回调有关。

 class Hello extends React.Component { constructor(props) { super(props); this.state = { number: 1, }; } onClickWithThisBindingInCallback = () => { this.setState({ number: 2 }, () => { this.myCallback(); }); }; onClickWithoutThisBindingInCallback = () => { const myCb = this.myCallback; this.setState({ number: 3 }, myCb); }; myCallback() { console.log(this.state.number); } render() { return ( <div className="App"> <button onClick={this.onClickWithThisBindingInCallback}>With binding</button> <button onClick={this.onClickWithoutThisBindingInCallback}>Without binding</button> </div> ); } } ReactDOM.render( <Hello name="World" />, document.getElementById('container') ); 

 <script src="https://unpkg.com/react@16.2.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.2.0/umd/react-dom.development.js"></script> <div id="container"> <!-- This element's contents will be replaced with your component. --> </div> 

Answer 1

如代码行所示， React用组件的实例this调用setState的回调函数。

积分： @ Li357

Answer 2

这是因为为您提供了lambda函数：

onClickWithThisBinding = () => {

Lambda函数在给定的上下文中执行。 因此，绑定实际上是onClick={() => { .. }} 。 这就是为什么它具有this上下文。

Answer 3

这是由于使用了箭头功能。

箭头函数总是具有相同的this他们周围的代码。 在这里查看更多。

如果您不想将方法绑定到该特定类，则可以使用这样的常规函数​​。

onClickWithoutThisBinding() {
    const myCb = this.myCallback;
    this.setState({ number: 3 }, myCb);
};