javascript - react 中各個聲明周期中異步的執行順序
問題描述
componentWillMount(){ setTimeout(()=>{ alert(1); },100) } componentDidMount(){ setTimeout(()=>{ alert(2); },100) }
組件中的2個生命周期函數都有異步操作,執行順序是嚴格按照聲明周期的順序,也就是先1后2,還是不確定執行順序是根據插入到消息隊列里面的先后順序執行的?問題可以理解為假設componentWillMount這個異步結果返回時間很長很長,而componentDidMount這個異步結果返回時間很短,有沒有可能先執行componentDidMount里面的回調結果,然后在執行componentWillMount里面的回調結果
問題解答
回答1:簡化問題為:假設兩個異步動作 A 和 B 觸發順序已知,那么 A 和 B 中同樣延時的 setTimeout 是否能保證順序?
答案顯然是不能的。例如當 A 和 B 之間只有微秒級延時時,兩個設定了巨大延時的 setTimeout 就不能保證按照調用 setTimeout 時的先后順序觸發。
不能夠依賴這種脆弱的時序關系來保證代碼的執行順序。在 Code Review 中如果遇到利用這種關系來實現數據初始化、異步請求等功能的代碼,答主肯定是會提出意見的。對于異步的控制流,可以采用 Promise / yield 等方式來保證執行順序,在這里就不贅述了。
相關文章:
1. html5 - css3scale和rotate同時使用轉換成matrix寫法該如何轉換?2. win10 python3.5 matplotlib使用報錯3. php多任務倒計時求助4. css - 如何把一個視圖放在左浮動定位的視圖的上面?5. javascript - jquery怎么讓a標簽跳轉后保持tab的樣式6. MySQL的聯合查詢[union]有什么實際的用處7. javascript - vue組件的重復調用8. javascript - 小demo:請教怎么做出類似于水滴不斷擴張的效果?9. python的正則怎么同時匹配兩個不同結果?10. javascript - axios請求回來的數據組件無法進行綁定渲染
