setState异步or同步试验

import React from 'react';

export default class SetState extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count1: 0,
      count2: 0
    }
  }
  addv1 = ()=>{
    setTimeout(() => {
      this.setState({count1:this.state.count1+1});
      this.setState({count1:this.state.count1+1});
      this.setState(prevState=>({
        count1:prevState.count1+1
      }));
      this.setState(prevState=>({
        count1:prevState.count1+1
      }));
    }, 0);
  }
  addv2 = ()=>{
    this.setState({count2:this.state.count2+1});
    this.setState({count2:this.state.count2+1});
    this.setState(prevState=>({
      count2:prevState.count2+1
    }));
    this.setState(prevState=>({
      count2:prevState.count2+1
    }));
  }
  render() {
    const { count1, count2 } = this.state;
    return (
      <div className="App">
        <div>
          {count1}
          <button onClick={()=>this.addv1()}>addv1</button>
        </div>
        <div>
          {count2}
          <button onClick={()=>this.addv2()}>addv2</button>
        </div>
      </div>
    );
  }
}

https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/17

tips

 如果还不清楚或者想交个朋友的同学可以微信联系我:qq981145483(备注:csdn)

发布了79 篇原创文章 · 获赞 9 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/qq_33807889/article/details/104948860
今日推荐