this.setState同步还是异步呢？

React.setState可能是批量异步更新的，也可能是同步执行的

代码语言：javascript复制

import React, { Component, useEffect, useState } from 'react'

export default class TimeCom extends Component {

  constructor(props) {
    super(props);
    this.state = {
      count: 0
    }
  }
  componentDidMount() {
     // 在生命周期中是异步的
    this.changeCount(2)
    //setTimeout setInterval 等宏任务队列中是同步的
    setTimeout(() => {
      this.changeCount(111)
    }, 1000);
    // 在js原生事件中是同步的
    document.getElementById('ab').onclick=()=>{
      this.changeCount(22222)
    }
  }
  changeCount = (val) => {
    this.setState({
      count: this.state.count   val
    },()=>{
      // callback是异步之后执行，总能得到最新得值
      console.log(this.state.count)
    })
    this.setState({
      count: this.state.count   111
    },()=>{
      // callback是异步之后执行，总能得到最新得值
      console.log(this.state.count)
    })
  }
  handleClick = () => {
    // 在合成事件中是异步的
    this.changeCount(1)
  }
  render() {
    let { count } = this.state;
    return (
      <div>
        <div>{count}</div>
        <div id="ab">原生 </div>
        <button onClick={this.handleClick}> count</button>
      </div>
    )
  }
} 

setState为批量异步的，那么同一次js执行栈中，多此setState()只有最后一次的操作会真的执行，怎么办？

代码语言：javascript复制

 // 参数为function时候，为同一个js执行栈中，多次执行setState，为链式调用，多次执行的都生效
    this.setState((state) => ({
      count: state.count   val
    }))

setstate 同步 异步

0 人点赞