react中setState

1.setState的异步;都知道setState是异步，当我们调用setState后，立马获取改变的state值。不一定获取得到。

constructor(props) {
    super(props)
    this.state = {
      counter: 0,
    }
  }

  handleClick = () => {
    this.setState({
      counter: this.state.counter + 1
    })
    console.log(this.state); //  {count: 0}
  }

从中可以看出setState是异步。如果需要获取setState的值，可以在setState回调函数中获取

  constructor(props) {
    super(props)
    this.state = {
      counter: 0,
    }
  }

  handleClick = () => {
    this.setState({
      counter: this.state.counter + 1
    }, () => {
      console.log(this.state); //  {count: 1}
    })
  }

2.同时调用多次setState函数

  constructor(props) {
    super(props)
    this.state = {
      counter: 0,
      name: "李四"
    }
  }

  componentDidUpdate() {
    console.log(this.state); // {counter: 2, name: "张三"}
  }

  handleClick = () => {
    this.setState({
      counter: this.state.counter + 1,
      name: "张三"
    })
    this.setState({
      counter: this.state.counter + 2
    })
  }

刚开始我也比较疑惑，为什么调用两次setState设置counter的，只有一次执行了呢？还有一个疑问调用了两次setState只执行了一次componentDidUpdate?后面查阅资料才知道，多次调用this.setState，react会把多次的修改放在一个队列缓存起来，等到合适的没有在次遇到this.setState后，在会去统一执行这些修改的值，这样做的目前为了提高性能，防止多次的render。当把修改counter放在队列后，后面又有一个修改counter。后面的一个会把前面的给覆盖，所以为什么没有执行counter加1的修改。