React：处理事件 - 参数可见性

Question

我正在关注 React Doc。在“处理事件”部分，有以下代码段。

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

在

handleClick()

函数中，如何访问

state

？为什么不

this.state

？

Answer 1

这就是 this.setState 的工作原理，它是为

this.setState()

传递的更新程序回调，根据反应文档：

通过更新函数可以访问当前状态 更新程序内的值。由于 setState 调用是批量的，这让 您可以链接更新并确保它们相互构建 冲突的

更多信息也可以在这里找到。

Answer 2

因为它是一个函数参数。在此代码中：

 handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

这部分是一个箭头函数，它将组件之前的状态作为参数：

state => ({
  isToggleOn: !state.isToggleOn
})

并返回一个新的状态，从而触发重新渲染等。

为什么不是这个状态？

经验法则：如果您的“下一个”状态取决于“上一个”状态，则您“必须”使用此方法来更新您的状态。因此，您不会遇到 this.setState 调用的竞争条件，因为它是异步函数。