狀態鉤

mstmahmuda11121

在 React 中，建構元件基本上有兩種方法：類別元件和函數元件。類別元件派生自React.Component並重寫render方法。此方法傳回元件的 DOM 描述，並在元件狀態發生變更時呼叫。任何可以在元件內存取的資料都可以從外部傳遞到元件中this.props。 第二種變體是功能組件，它僅由一個render與方法類似的函數組成。不同之處在於，這裡的“props”直接作為參數傳遞給函數。當使用 React 元件時，從外部無法看出它是作為類別元件還是函數元件實現的。 我們的電子書中有更多包含 React 使用技巧的專家文章。電子書 React – 立即免費下載！ React 本身就受到「函數式程式設計」概念的影響，而社群也對這種範式有著濃厚的興趣。因此，功能組件特別受歡迎也就不足為奇了。


，到目前為止，功能組件的可能性有限，而類別組件對於許多事情來說始終是必需的。 一方面，只有類別元 沙烏地阿拉伯 電話號碼 件才可以管理本地狀態，而函數元件只能顯示從外部傳入的資料。此外，只有類別元件才能存取眾多生命週期方法，例如在元件安裝到元件樹中後執行程式碼。然而，為了能夠正確使用網路請求或計時器等副作用，這些生命週期是必要的。 這導致了React 社區中“啞”顯示組件和“智能”組件之間的常見區別，“啞”顯示組件只是接受數據並很好地顯示它，而“智能”組件本身對顯示貢獻不大，但管理資料並實現邏輯。即使使用鉤子，也有充分的理由保持這種概念上的分離，但到目前為止，實現的類型必然有所不同。 透過鉤子，現在可以實現以前需要類別組件和功能組件的幾乎所有方面。使用當地政府的例子可以最好地說明這一點。




圖 1 顯示了一個顯示標題和文字的元件，其中可以使用按鈕折疊和展開文字。作為類別元件實作的關聯程式碼可以在程式碼區塊 1 中找到。 插圖-可擴展盒方法特別有趣switchExpansion。這裡呼叫 React 方法setState來切換標誌的本地狀態expanded。根據此標誌，render內容部分將在方法中呈現並設定 CSS 類別。 狀態鉤 作為帶有鉤子的功能組件的變體可以在代碼區塊 2 中看到。這裡第一個令人興奮的事情是 X 行在useState中被呼叫。這是第一個 React 鉤子。鉤子是特殊函數，其參數和返回值可以變化。對於useState，函數傳回包含兩個元素的陣列：第一個是狀態變數的目前值。這可以在返回區塊中使用來影響顯示。就像類別元件一樣，狀態不能直接使用賦值來更改，但必須呼叫一個特殊的函數（對於類別元件setState），以便 React 可以記錄此更改並導致元件被重繪。