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)

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章