了解React組件生命周期

王軍發布于2019-08-21 17:13 / 306人閱讀

摘要：問題了解組件的生命周期知識點流程狀態圖注意流程狀態圖為使用方法的生命周期使用獲取后臺數據渲染時，一般將調用方法放在中，這樣可以先渲染虛擬再展示數據，當再次調用數據改變時，內數據會再次渲染，而不用再次加載整個。

問題

了解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里面調用？

GPU云服務器云服務器生命周期軟件生命周期生命周期理論頁面生命周期

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89272.html

不了解一下React16.3之后的新生命周期？

摘要：本文主要介紹之后的生命周期。該方法有兩個參數和返回值為對象不需要返回整體，把需要改變的返回即可。必須有一個返回值，返回的數據類型可以有。此生命周期主要用于優化性能。最后，說明一點這三個生命周期在未來版本中會被廢棄。 React16.3.0開始，生命周期進行了一些變化。本文主要介紹React16.3.0之后的生命周期。 React16.3.0之前生命周期: 16版本之前的react組件的...

468122151 2019-08-23 15:41 評論0 收藏0
React.js 小書 Lesson20 - 更新階段的組件生命周期

摘要：所以對于組件更新階段的組件生命周期，我們簡單提及并且提供一些資料給大家。這里為了知識的完整，補充關于更新階段的組件生命周期你可以通過這個方法控制組件是否重新渲染。大家對這更新階段的生命周期比較感興趣的話可以查看官網文檔。 React.js 小書 Lesson20 - 更新階段的組件生命周期本文作者：胡子大哈本文原文：http://huziketang.com/books/react...

Yumenokanata 2019-08-21 17:34 評論0 收藏0
Hooks 與 React 生命周期的關系

摘要：更新階段卸載階段兄弟節點之間的通信主要是經過父組件和也是通過改變父組件傳遞下來的實現的，滿足的設計遵循單向數據流模型，因此任何兩個組件之間的通信，本質上都可以歸結為父子組件更新的情況。你真的了解 React 生命周期嗎？ React 生命周期很多人都了解，但通常我們所了解的都是單個組件的生命周期，但針對 Hooks 組件、多個關聯組件（父子組件和兄弟組件）的生命周期又是怎么樣的...

oliverhuang 2019-08-26 10:25 評論0 收藏0
React組件生命周期

摘要：組件生命周期此文章適合之前的版本，，添加了一些新的生命周期函數，同時準備廢棄一些會造成困擾的生命周期函數。每個生命周期階段調用的鉤子函數會略有不同。 React組件生命周期此文章適合 React@17 之前的版本，React@16.3.0，添加了一些新的生命周期函數，同時準備廢棄一些會造成困擾的生命周期函數。所有如果在React@17 發布之前，這篇文章還是適用的。新的生命周期請看官...

mgckid 2019-08-20 10:42 評論0 收藏0
淺談React Fiber

摘要：因為版本將真正廢棄這三生命周期到目前為止，的渲染機制遵循同步渲染首次渲染，更新時更新時卸載時期間每個周期函數各司其職，輸入輸出都是可預測，一路下來很順暢。通過進一步觀察可以發現，預廢棄的三個生命周期函數都發生在虛擬的構建期間，也就是之前。 showImg(https://segmentfault.com/img/bVbweoj?w=559&h=300); 背景前段時間準備前端招聘事項...

izhuhaodev 2019-08-26 10:43 評論0 收藏0