React setState异步同步

一、setState

setState处在同步的逻辑中，异步更新状态，更新真实dom

setState处在异步的逻辑中，同步更新状态，同步更新真实dom

import React, { Component } from 'react'
export default class App extends Component {
  state = {
    num: 1
  }
  handleOnClick() {
    this.setState({
      num: this.state.num + 1
    })
    this.setState({
      num: this.state.num + 1
    })
    this.setState({
      num: this.state.num + 1
    })
    console.log(this.state.num)//输出结果num每次加1
  }
  render() {
    return (
      <div>
        <button onClick={() => {
          this.handleOnClick()
        }}>{this.state.num}</button>
        <button onClick={() => {
          setTimeout(() => {
            this.setState({
              num: this.state.num + 1
            })
            this.setState({
              num: this.state.num + 1
            })
            this.setState({
              num: this.state.num + 1
            })
           console.log(this.state.num)//输出结果num每次加3
          }, 1000)
        }}>{this.state.num}</button>
      </div>
    )
  }
}

setState 接受第二个参数，第二个参数回调函数，状态和dom更新完后就会被触发。

 this.setState({
      num: this.state.num + 1
    }, () => {
      console.log(this.state.num)
    })