1. setState的三种写法

(1) 普通写法

可以直接传入对象，当调用setState后会与原state对象进行合并操作

import React, { Component } from 'react'

export default class App extends Component {
  constructor(){
    super()
    this.state = {
      message: 'hello world'
    }
  }

  changeMessage(){
    // 第一种方式
    this.setState({
      message: this.state.message + '！'
    })
  }

  render() {
    return (
      <div>
        <button onClick={ ()=> this.changeMessage() }>修改消息</button>
        <div>{this.state.message}</div>
      </div>
    )
  }
}

（2）函数写法

传入函数，传入的函数可以接收两个参数，当前的state和props

可以在函数中编写逻辑

函数需要返回一个对象，这个对象会与原state对象进行合并操作

import React, { Component } from 'react'

export default class App extends Component {
  constructor(){
    super()
    this.state = {
      message: 'hello world'
    }
  }

  changeMessage(){
    // 第二种方式
    // 好处一：可以在回调函数中编写新的state的逻辑
    // 好处二：当前的回调函数会将之前的state和props传递进来
    this.setState((state,props)=>{
      return {
        message: this.state.message + '！'
      }
    })
  }

  render() {
    return (
      <div>
        <button onClick={ ()=> this.changeMessage() }>修改消息</button>
        <div>{this.state.message}</div>
      </div>
    )
  }
}

(3) 两个参数

第二个参数是一个回调函数，当state中的数据修改后，会调用

import React, { Component } from 'react'

export default class App extends Component {
  constructor(){
    super()
    this.state = {
      message: 'hello world'
    }
  }

  changeMessage(){
    // 第三种方式
    // 如果希望在数据更新之后,获取的对应的结果执行一些逻辑代码
    // 那么可以在setState中传入第二个参数：callback
    this.setState({
      message: this.state.message + '！'
    },() => {
      // 这里会打印最新的message
      console.log(this.state.setState)
    })
  }

  render() {
    return (
      <div>
        <button onClick={ ()=> this.changeMessage() }>修改消息</button>
        <div>{this.state.message}</div>
      </div>
    )
  }
}

2. setState同步异步

1.setState在合成事件和生命周期函数中是异步的，在原生事件和setTime中都是同步的。

（合成事件是在类组件中的方法，原生事件是通过addEventListener绑定的原生事件）

2.但是在react18之后，在原生事件和setTime中也变为异步的了。