React setState的异步操作

在React里最为常用的setState方式就是：

import styles from './TestNumber.css'
import React from 'react'
class TestNumber extends React.Component {
  state = {
    number: 0
  }
  handleClick = () => {
    this.setState({ number: this.state.number + 1 })
  }
  render() {
    return (
      <div>
        <h1>{this.state.number}</h1>
        <input type="button" onClick={this.handleClick} value="add" />
      </div>
    )
  }
}
export default TestNumber

假如我连续setState多次：

  handleClick = () => {
    this.setState({ number: this.state.number + 1 })
    this.setState({ number: this.state.number + 1 })
    this.setState({ number: this.state.number + 1 })
  }

React内部会对state对象进行合并操作，更新state，也就是说最后number只还加1。

这是同步的setState,会对多次操作进行合并处理。如果想要达到一次加3的效果，那么我们就要用另外一种setState的方式：

import styles from './TestNumber.css'
import React from 'react'
class TestNumber extends React.Component {
  state = {
    number: 0
  }
  handleClick = () => {
    this.setState({ number: this.state.number + 1 })
  }
  addScync = () => {
    this.setState((preState, props) => ({ ...preState, number: preState.number + 1 }));
  }
  handleAsyncClick = () => {
    this.addScync()
    this.addScync()
    this.addScync()
  }
  render() {
    return (
      <div>
        <h1>{this.state.number}</h1>
        <input type="button" onClick={this.handleClick} value="add" />
        <input type="button" onClick={this.handleAsyncClick} value="addAsync" />
      </div>
    )
  }
}
export default TestNumber

setState方法接收的参数还可以是一个函数，函数两个参数，一个是preState,一个是props,然后此函数返回新的state对象，这是一个异步更新state的过程，当我连续执行了三次addAsync方法的时候，每一次加1的操作都是基于上一次加1之后的state进行更新。