React 組件生命週期：你需要知道什麼 [2022]

已發表: 2021-01-06

在 React 中，應用程序被分成最小的可能部分，稱為組件。 組件可以是展示的或容器的。

當我們談論表示組件時，它們沒有邏輯。 它們嵌入在組件內部； 它只有用戶界面。

容器組件是使用表示組件並在組件中具有業務邏輯的組件。 此類組件通常必須保留本地狀態對像以實現它們可能負責的眾多用例之一。 這些組件使用展示組件作為子組件，並使用各種道具傳遞數據。

React 允許您擁有類或函數式組件。 React 生態系統中使用的一種流行模式是表示組件是功能類型的組件，而容器組件是類類型。

react 生命週期顯示了組件經歷的確切過程，以及 react 組件生命週期背後的原因。

目錄

功能組件

這些是沒有狀態的，只能使用道具進行操作。

所有組件生命週期方法或setState都不能在此類組件內使用或訪問。

結帳： React 項目創意

類組件

這些組件可以具有本地狀態，並且可以訪問生命週期方法和setState 。

react 中的一個典型類組件如下所示：-

組件生命週期分為三個階段：-

  1. 安裝
  2. 更新
  3. 卸載

安裝

當創建任何組件並將其插入 DOM（文檔對像模型）時，使用的方法是：

●構造函數()

●靜態 getDerivedStateFromProps()

●渲染（）

● componentDidMount()

更新

當提供給組件的 prop 或狀態發生更改時，組件的重新渲染也稱為更新階段。 在這個階段，下面給出了以下被調用的生命週期方法：

● 靜態 getDerivedStateFromProps()

● shouldComponentUpdate()

● 渲染（）

● getSnapshotBeforeUpdate()

● componentDidUpdate()

閱讀： Vue vs React：Vue 和 React 的區別

卸載

在卸載任何組件期間調用此方法：-

● 組件 willUnmount()

它是在文檔對像模型被破壞之前調用的最後一個函數。 它可以清理在 componentWillMount 期間構建的任何元素。

為了組件中的錯誤處理目的，保留了一些方法：-

● 靜態 getDerivedStateFromError()

● componentDidCatch()

常用的生命週期方法詳細解釋：-

● 構造函數（道具）

這種生命週期方法用於組件的安裝階段。 可以在這裡聲明一個本地狀態對象。 super(props) 在任何其他語句之前在構造函數中被調用； 否則，訪問 this.props 時會出錯。

如果不打算聲明本地狀態對像或將事件處理程序綁定到實例，則無需編寫組件的生命週期方法。

不建議使用 constructor() 中的調用狀態，因為它會在上一個循環結束之前觸發重新渲染。

Constructor() 是唯一可以直接分配狀態的地方。 否則，如果需要更改狀態或在其中分配某些內容，則應使用this.setSate 。

●渲染（）

在這個方法組件內部，編寫了 JSX 部分。 JSX 類似於 HTML，但它是 javascript 的擴展語法。 當我們使用 JSX 時，我們還可以在 render 方法中使用 Javascript 表達式。

任何父組件的 render() 方法都可能在其中包含子組件。 所有這些都遵循組合模式，這是反應組件的基礎。

每當調用父級的渲染方法時，子組件的渲染也開始，並且只有在整個子渲染完成後，父級渲染才完成。

render 方法是必需的方法； 沒有這個，就無法製作組件，因為這是唯一可以編寫組件視圖部分的地方。

render 方法是純的； 這意味著它不能修改其中的狀態。

對於處於更新階段的任何組件，是否會重新渲染特定組件可能取決於shouldComponentUpdate()生命週期方法返回類型或使用。

不建議在此方法中進行 API 調用以及與瀏覽器的任何交互，這會引發錯誤。

● componentDidMount()

此方法在組件安裝後立即調用。 現在 DOM 可用於進一步操作。 可以在此方法中調用setState 。

此外，可以從這裡進行與瀏覽器或 API 調用的交互。

此方法僅在創建期間調用一次。 該方法不會在任何進一步的重新渲染部分中運行，並且其中的邏輯也不會運行。

● componentDidUpdate()

這與 componentDidMount 相同。 可能會出現錯誤，唯一的區別是僅在發生組件重新渲染時才調用此方法。 初始渲染不調用此方法。

setState 和副作用可以在這個方法中完成。 但是 setState 需要被包裹在一個條件中； 否則，可能會陷入渲染無限循環，渲染永遠不會結束。

如果 shouldComponentUpdate() 返回 false，也不會調用 componentDidUpdate。

●組件WillUnmount()

當組件的卸載階段正在進行時，將調用此方法。

在方法內部，理想情況下，可以實現事件處理程序的移除和內存的清理。

不應在 this 內部調用 setState() 函數，因為它會導致組件重新渲染。

● shouldComponentUpdate()

在開發 React 應用程序時，經常會出現必須避免不必要的組件重新渲染的情況。 要實現這個類內組件，有上面提到的方法。 如果此方法返回 false，則不會發生組件及其子組件的重新渲染。

可以檢查以前的 props 並與提供的新 props 進行比較，以確保沒有更改，然後返回 false。

不建議再次調用其中的 setState() 方法，這會導致重新渲染。

此外，不應在此方法內執行副作用。

此方法還有另一種替代方法。 可以在擴展類的同時使用 React.pureComponents。 這比 shouldComponentUpdate() 更穩定可靠。

最後但並非最不重要的一點是，存在用於捕獲錯誤的反應組件的錯誤邊界類型。

必須簡單地用錯誤邊界組件包裝組件。

在這個特殊組件中，使用了兩種生命週期方法：-

  1. 靜態 getDerivedStateFromError()
  2. 組件DidCatch()

如果任何後代組件拋出錯誤，它們都會被調用。

第一個是在渲染階段調用的，所以它裡面不允許有副作用。 第二個是在提交階段調用的，因此它內部允許有副作用。

另請閱讀：印度的 ReactJS 開發人員薪水

從世界頂級大學在線學習軟件工程課程。 獲得行政 PG 課程、高級證書課程或碩士課程，以加快您的職業生涯。

結論

React 組件生命週期增加了代碼的複雜性，但通過方法完成的系統執行和操作從開發人員的角度來看似乎非常有吸引力。 React 生命週期允許重構或操作組件。

如果您有興趣了解更多關於 React、全棧開發的信息，請查看 upGrad 和 IIIT-B 的全棧軟件開發執行 PG 計劃，該計劃專為工作專業人士設計，提供 500 多個小時的嚴格培訓，9 個以上的項目和任務、IIIT-B 校友身份、實用的實踐頂點項目和頂級公司的工作協助。

為未來的職業做準備

立即申請全棧開發的執行 PG 計劃