瞭解React組件生命週期

問題

瞭解React組件的生命週期

知識點

React流程狀態圖

注意：流程狀態圖爲使用React.createClass方法的生命週期

• 使用ajax獲取後臺數據渲染時，通常將調用ajax方法放在componentDidMount中，這樣能夠先渲染虛擬dom再展現數據，當再次調用ajax數據改變時，dom內數據會再次渲染，而不用再次加載整個dom。若是在該dom要根據條件只經過ajax獲取一次數據，則能夠將調用ajax的方法放在componentWillMount。
• 當工程中未加載jQuery，異步請求也可使用fetch等
• 在componentWillUpdate中，儘可能避免使用setState()或setProps()方法。若無條件判斷狀況下使用setState()或setProps()，會致使死循環，一樣componentDidUpdate中使用setState()若無條件限制也會致使死循環。
• 經過shouldComponentUpdate能夠對是否進行渲染的條件判斷，可以做爲性能調優的手段，避免無心義渲染。
• componentWillReceiveProps能夠經過nextProps獲取新傳入的參數值，例如：nextProps.operationType獲取operationType
• 建議使用setState()的週期爲：componentWillMount、componentDidMount、componentWillReceiveProps、componentDidUpdate
• 注意對應週期中this.state的值

經過構建列表樹後總結補充：

• setState不會當即生效，要通過render過程才能真正改變state值
• 在return時調用方法setState，會引發shouldComponentUpdate週期，而此時componentDidMount週期已完成。

參考文章

React組件生命週期過程說明
React組件生命週期
React數據獲取爲何必定要在componentDidMount裏面調用？