React 的 this.setState 全是异步执行吗？

[qiuhongbingo]

/**
 * this.setSate 这个 API 官方描述为
 * setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall.
 * 用词是 may，也就是不全是异步执行，也不全是同步执行的
 * 实际上，React 控制的事件处理过程，setState 不会同步更新
 * 而在 React 控制之外的情况，setState 会同步更新
 * 通过“延迟更新”，可以达到更好的性能
 */

class Bingo {
  onClick() {
    this.setState({
      count: this.state.count + 1
    })
  }

  componentDidMount() {
    document.querySelectorAll('#btn-raw').addEventListener('click', this.onClick)
  }

  render() {
    return (
      <React.Fragment>
        {/* 通过 addEventListener 完成的，是脱离于 React 事件之外的，因此它是同步更新的 */}
        <button id="btn-raw">click out React</button>
        {/* 通过绑定事件处理完成的，是 React 控制的，因此它是异步更新的 */}
        <button onClick={this.onClick}>click in React</button>
      </React.Fragment>
    )
  }
}