setState的同步更新

react中的setState特色：

1. 是异步操做函数；
2. 组件在尚未渲染以前, this.setState 尚未被调用；
3. 批量执行 State 转变时让 DOM 渲染更快(相对比一个一个的setState的来的快)。

例如：{count:0}//初始化count
this.setState({count:1});
console.log(this.state.count);

setState函数并不会阻塞等待状态更新完毕。因此，打印出来的并非count=1，而仍是count=0。

不少时候，咱们须要想要的state状态更新完成后再进行某些操做。此时，咱们能够选择在componentWillUpdate生命周期或者componentDidUpdate生命周期的回调函数去执行咱们的操做。虽然也能够达到预期效果，可是这样作不是最佳方法，代码变得破碎，可读性也很差。

所以，此时咱们就须要保证setState的同步更新。

• setState支持回调函数

第一个参数是咱们要设置的state，第二个参数是在状态更新完毕后的回调操做

this.setState({count:1},()=>{
console.log(this.state.count)//输出count=1
});

•  ES7的Async/Await实现异步转同步

var delay = function (time) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve();
}, time);
})
};

var start = async function () {
console.log('a');
await delay(2000);
console.log('b');
};

start();//先输出a，稍等2秒后，输出了b

一样在react中的应用：

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
}

1. async 表示这是一个async函数，await只能用在这个函数里面。
2. await 表示在这里等待promise返回结果了，再继续执行。
3. await 后面跟着的应该是一个promise对象

附录：

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;
  }
};