在使用react當中,我們常常面臨着選擇合適的生命周期向服務端發起請求的抉擇。我根據日常業務經驗和react官方文檔,總結出兩個參考因素:
1、請求的類型(同步或異步)
2、請求數據的用途(初次渲染、前端向服務端同步數據、服務端向前端同步數據);
場景1:數據用作UI組件的初次渲染,如果需要保證組件和數據同時渲染出來,這個時候需要同步的請求方式,可以在constructor生命周期中發起同步的XmlHttpRequest請求,這樣會阻礙組件的實例化,一般不推薦這樣的實現方式。react16.0之前面臨同樣的情況一般會在componentWillMount中發起數據的請求,但是由於react16.0已經不推薦使用componentWillMount生命周期,並且react采用了新的fiber異步渲染架構可能會造成componentWillMount生命周期方法多次調用。所以,現在我們一般是在constructor生命周期中發起同步數據請求。如果出於用戶體驗考慮,不希望同步請求阻塞頁面的渲染,需要采用異步的請求方式,這個時候需要在componentDidMount中發起異步請求,數據缺省部分用spin提示loading狀態。componentDidMount方法在react的整個生命周期中只會調用一次,並且如果在這個生命周期中訂閱了事件,可以在相應的componentWillMount生命周期中取消訂閱。
場景2:如果我們需要根據前端的應用狀態向服務端同步數據,那我們需要在componentDidUpdate生命周期中將前端的狀態數據處理之后異步發送給服務端,這個生命周期更能體現react框架的響應性,並且在componentDidUpdate中通過比較前后應用狀態,可以減少不必要的重復請求。
場景3:如果我們需要根據服務端的最新數據更新組件狀態,我們一般通過輪詢或者websocket等其他服務端主動推送方式。這個時候我們同樣選擇在componentDidMount,理由和場景1異步獲取組件初次渲染數據是一樣的。
以上主要是針對日常工作的簡單思考總結,如有缺漏不妥之處,歡迎拍磚