前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >this.setState同步还是异步呢?

this.setState同步还是异步呢?

作者头像
刘嘿哈
发布2022-10-25 14:04:42
2860
发布2022-10-25 14:04:42
举报
文章被收录于专栏:js笔记

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
    }))
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-11-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档