setState 实现同步策略方法

1、setTimeout

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      val: 0
    };
  }
  
  componentDidMount() {
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 1 次 log->0

    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 2 次 log->0

    setTimeout(() => {
      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 3 次 log->2

      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 4 次 log->3
    }, 0);
  }

  render() {
    return null;
  }
};

由于setTimeout关系 ,setTimeout是独立的且不同时的宏任务(task) 更新state时 所以能够直接进行同步更新,所以连着输出 2,3。

2、prevState

incrementCount(){
   this.setState((prevState, props) => ({
      count: prevState.count + 1
    }));
   this.setState((prevState, props) => ({
      count: prevState.count + 1
    }));
  }

3、addListener 原生监听

4、async await

Promise来封装setState:
setStateAsync(state) {
return new Promise((resolve) => {
this.setState(state, resolve)
});
}
async componentDidMount() {
await this.setStateAsync({count: 1});
console.log(this.state.count);//输出count=1
}

参考 https://www.cnblogs.com/zhuotiabo/p/6265172.html

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 废话少说,本文分四个部分,css、js、知识点一、知识点二、React(部分问题没有给出答案,后续更新) css面...
    666同学阅读 1,130评论 0 0
  • 一、CSS问题 1.flex布局 display:flex; 在父元素设置,子元素受弹性盒影响,默认排成一行,如果...
    陈二狗想吃肉阅读 642评论 0 9
  • 1、Iterator接口实现了该接口的对象原型中有属性Symbol.iterator,其值是一个函数,返回一个可迭...
    请叫我啊亮阅读 524评论 0 0
  • 夜莺2517阅读 127,759评论 1 9
  • 版本:ios 1.2.1 亮点: 1.app角标可以实时更新天气温度或选择空气质量,建议处女座就不要选了,不然老想...
    我就是沉沉阅读 6,954评论 1 6