如果你是从 Vue 或微信小程序中转过来的开发者，在 React 上会栽一些跟头。下面列举一些开发者经常犯的错误。

setState 是异步的

这是犯错频率最高的。

第一，setState 是异步的。

用惯了微信的 setData，或者 Vue 的 data，你会觉得 React 的 setState 突破了你的认知。

class My extends React.Component {
  state = {
    count: 1
  }

  handleAdd = () => {
		// 假设 this.state.count 为 1
    this.setState({count: this.state.count + 1})
		
		// 🔴 这里输出的是 1！
    console.log(this.state.count)
  }

  render() {
    return <div onClick={this.handleAdd}>{this.state.count}</div>
  }
}

为什么？

setState 实际上是一个”状态变更请求“，它是异步的，类似于我们的后端接口请求。React 会将它加入更新队列，择机批量更新, 然后重新渲染组件。