react的setState用法及原理

React18 setState的更新

这是react官方的截图，在react18后setState在任何情况下都是异步执行的

校验是否异步执行

import React, { Component } from "react"

export class App extends Component {
  constructor() {
    super()
    this.state = {
      count: 0
    }
  }
  
  increase(){
    console.log(this.state.count) // 0
    this.setState({
      count: this.state.count + 1
    })
    console.log(this.state.count) // 0
  }

  render() {
    const { count } = this.state
  
    return (
      <div>
        <div>{ count }</div>
        <button onClick={() => this.increase()}>+1</button>
      </div>
    )
  }
}

export default App

原因： 这个时候count是修改成功的，但是console.log为同步执行，所以打印的count是修改前的值

原理：在一次单独的渲染事件中，调用setState修改数据的行为，react内部会先保存在一个队列中，当同步任务执行完之后，再批量更新，可以减少执行render函数的次数，从而减少性能消耗

如何获取修改后的值

setState有3种用法

// 第一种用法
setState({
  count: 10
})

// 第二种用法
setState(() => {
  return {
    count: 10
  }
})

// 第三种用法
setState({
  count: 10
}, () => {
  // render后执行回调
})

我们可以通过传入回调函数到setState中，获取最新的数据

import React, { Component } from "react"

export class App extends Component {
  constructor() {
    super()
    this.state = {
      count: 0,
    }
  }

  increase() {
    this.setState(
      {
        count: this.state.count + 1,
      },
      () => { // 回调函数会在执行完render函数后执行
        console.log(this.state.count) // 1
      }
    )
  }

  render() {
    const { count } = this.state

    return (
      <div>
        <div>{count}</div>
        <button onClick={() => this.increase()}>+1</button>
      </div>
    )
  }
}

export default App