setState异步问题（同一个函数中state无法同步更新）

import React, { Component } from 'react'

export default class App extends Component {
    state={
        count:0
    }
    //点击一次后
    increment=()=>{
        const {count}=this.state
        console.log("count前"+count);//0
        this.setState({count:count+1})
        this.setState({count:count+1})
        this.setState({count:count+1})
        console.log("count后"+count);//0
    }
    decrement=()=>{
        console.log("decrement"+this.state.count);//1
    }
    render() {
        console.log("渲染后"+this.state.count);//1

        return (
            <div>
                {this.state.count}
                <button onClick={this.increment}>+</button>
                <button onClick={this.decrement}>-</button>
            </div>
        )
    }
}
/* 点击increment后increment中的state.count没有立即被渲染但是setstate会引发重新渲染，因此除去increment函数中的
state.count没被渲染，其他的都被渲染。
*/

class App extends React.Component {
  state = {
    counter: 0,
  }
  handleClick = () => {
    const { counter } = this.state;
    //或者 const counter = this.state.counter;
    this.setState({ counter: counter + 1 });
    this.setState({ counter: counter + 1 });
    this.setState({ counter: counter + 1 });
  }
  render() {
    return (
      <div>
        counter is: {this.state.counter}
        <button onClick={this.handleClick} >点我</button>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

class App extends React.Component {
  state = {
    counter: 0,
  }
  handleClick = () => {
    this.setState(prev => ({ counter: prev.counter + 1 }));
    this.setState(prev => ({ counter: prev.counter + 1 }));
    this.setState(prev => ({ counter: prev.counter + 1 }));
    //这样是错的 this.setState(prev => {counter: prev.counter + 1});
    //这样是错的 this.setState(prev => {counter:++prev.counter});
    //这样是错的 this.setState(prev => {counter:prev.counter++});
  }
  render() {
    return (
      <div>
        counter is: {this.state.counter}
        <button onClick={this.handleClick} >点我</button>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

之所以成功是因为：传入多个 setState 的多个 Object 会被 shallow Merge，而传入多个 setState 的多个 function 会被 “queue” 起来，queue 里的 function 接收到的 state(上面是 prev )都是前一个 function 操作过的 state。

这样 counter(计数器)会更新失败

// 错误
this.setState({
  counter: this.state.counter + this.props.increment,
});

要弥补这个问题，使用 setState() 的另一种形式，它接受一个函数而不是一个对象。这个函数有两个参数：
（1）第一个参数: 是当前最新状态的前一个状态（本次组件状态修改前的状态）
（2）第二个参数：是当前最新的属性props

// 正确
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

//注意：下面这样是错的
this.setState((prevState, props) => { //没将{}用()括起来，所以会解析成代码块
  counter: prevState.counter + props.increment
});