Question

我期待在＆＃34;没有绑定＆＃34;时记录undefined。单击了按钮，因为当您将方法引用明确地作为回调传递时，不应该使用正确的this上下文调用它，但是使用箭头函数时，应该。

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

这与箭头函数类属性没有关系，它与将方法的引用作为回调传递给setState而不是箭头函数有关。 < / p>

＆＃13;

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')
);

＆＃13;

<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>

＆＃13;

Answer 1

React使用组件的setState调用this的回调函数，如this line of code所示。

致谢：@Li357

Answer 2

这是因为你给它一个lambda函数：

onClickWithThisBinding = () => {

lambda函数在给定的上下文中执行。所以绑定实际上是onClick={() => { .. }}。这就是它具有this上下文的原因。

Answer 3

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

箭头函数始终与其周围代码具有相同的this。查看更多here。

如果您希望该方法不被绑定到该特定类，您可以使用这样的普通函数。

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

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

3 个答案: