React 批处理发生在事件处理程序和生命周期方法中的状态更新。因此，如果您在<div onClick />处理程序中多次更新状态，React 将在重新渲染之前等待事件处理完成。

需要明确的是，这仅适用于 React 控制的合成事件处理程序和生命周期方法。例如，状态更新不会在 AJAX 和setTimeout事件处理程序中进行批处理。

setState() 方法不会立即更新组件的状态，它只是将更新放入队列以供稍后处理。React 可以将多个更新请求一起批处理，以提高渲染效率。因此，当您尝试根据组件的先前状态更新状态时，必须采取特殊的预防措施。

例如，即使调用了 4 次，以下代码也只会将状态值属性增加 1：

 class Counter extends React.Component{
   constructor(props){
     super(props)
    //initial state set up
     this.state = {value:0}
   }
   componentDidMount(){
    //updating state
    this.setState({value:this.state.value+1})
    this.setState({value:this.state.value+1})
    this.setState({value:this.state.value+1})
    this.setState({value:this.state.value+1})
   }
   render(){
    return <div>Message:{this.state.value}</div>
   }
}

为了在更新后使用状态，请执行回调参数中的所有逻辑：

//this.state.count is originally 0
this.setState({count:42}, () => {
  console.log(this.state.count)
//outputs 42
})

setState(updater,[callback]) 方法可以将更新程序函数作为其第一个参数，以根据先前的状态和属性更新状态。updater 函数的返回值将与之前的组件状态进行浅合并。该方法异步更新状态，因此有一个选项回调，一旦状态完全完成更新，就会调用该回调。

例子：

this.setState((prevState, props) => { 
return {attribute:"value"}
})

以下是如何根据先前状态更新状态的示例：

    class Counter extends React.Component{
      constructor(props) {
        super(props)
    //initial state set up
        this.state = {message:"initial message"}
    }
      componentDidMount() {
    //updating state
        this.setState((prevState, props) => {
          return {message: prevState.message + '!'}
        })
     }
     render(){
       return <div>Message:{this.state.message}</div>
     }
  }