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