javascript - react 中各個聲明周期中異步的執行順序

問題描述

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

組件中的2個生命周期函數都有異步操作，執行順序是嚴格按照聲明周期的順序，也就是先1后2，還是不確定執行順序是根據插入到消息隊列里面的先后順序執行的？問題可以理解為假設componentWillMount這個異步結果返回時間很長很長，而componentDidMount這個異步結果返回時間很短，有沒有可能先執行componentDidMount里面的回調結果，然后在執行componentWillMount里面的回調結果

問題解答

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

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

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