javascript - react 中各個宣告週期中異步的執行順序

Question

componentWillMount(){
    setTimeout(()=>{
      alert(1);
    },100)
  }

  componentDidMount(){
    setTimeout(()=>{
      alert(2);
    },100)
  }
  

元件中的2個生命週期函數都有非同步操作，執行順序是嚴格按照宣告週期的順序，也就是先1後2，還是不確定執行順序是根據插入到訊息佇列裡面的先後順序執行的？問題可以理解為假設componentWillMount這個非同步結果回傳時間很長很長，而componentDidMount這個非同步結果回傳時間很短，有沒有可能先執行componentDidMount裡面的回呼結果，然後在執行componentWillMount裡面的回呼結果

Answer 1

簡化問題為：假設兩個非同步動作 A 和 B 觸發順序已知，那麼 A 和 B 中同樣延時的 setTimeout 是否能保證順序？

答案顯然是不能的。例如當 A 和 B 之間只有微秒延時時，兩個設定了巨大延時的 setTimeout 就不能保證按照調用 setTimeout 時的先後順序觸發。

不能夠依賴這種脆弱的時序關係來保證程式碼的執行順序。在 Code Review 中如果遇到利用這種關係來實現資料初始化、非同步請求等功能的程式碼，答主肯定是會提出意見的。對於非同步的控制流，可以採用 Promise / yield 等方式來保證執行順序，在這裡就不贅述了。