效果掛鉤
useState掛鉤傳回更新函數作為第二個陣列元素。您不應該對等號左側的方括號感到困惑。這就是所謂的“解構”，TypeScript 和現代 JavaScript 帶來了直接存取數組元素並將它們分配給局部變數的功能。對於功能組件沒有單獨的方法。相反，在必要時會重新執行整個函數。例如，如果從外部傳入的 props 發生變化，或者useState呼叫了傳回的 update 函數，就會發生這種情況。在這種情況下，useState更新的值會作為第一個陣列元素傳回，以便可以在元件內進行操作。 React 附帶的所有鉤子都遵循「useX」命名約定，並且強烈建議自訂鉤子使用此約定，以便能夠第一眼就識別出鉤子。這很重要，因為必須嚴格遵守掛鉤的特殊規則： 掛鉤只能在函數元件或自訂掛鉤中使用，而不能在類別元件或其他函數中使用。此外，鉤子不能在 IF 分支、循環或子函數內調用，而必須位於函數元件或自訂鉤 沙烏地阿拉伯 電話號碼 子的頂層。這條規則的原因是 React 追蹤鉤子呼叫的順序，並且是跨多個渲染週期分配鉤子的唯一方法。然而，在實踐中，這些規則被證明是沒有問題的，而且你很快就會習慣它們。事實證明，始終在函數元件的開頭呼叫鉤子是一種很好的做法，以便保持良好的概覽。 效果掛鉤 React 帶來的第二個重要的鉤子是useEffect。它主要用於使用生命週期方法實現類別組件的情況。一個例子是元件顯示後立即透過網路非同步載入資料：對於類別元件，實作此方法componentDidMount，顧名思義，在元件插入元件樹後直接呼叫該方法。在該方法中可以啟動網路請求並訂閱結果。一旦結果出現，setState本地狀態就會更新，進而觸發使用載入的資料重繪元件。
https://sstfmakebbs.files.wordpress.com/2024/04/j.png?w=487
程式碼區塊 3 示意性地顯示了這一點。為了使用功能元件獲得相同的結果，使用了useEffect。此鉤子將表示要執行的效果的函數作為其第一個參數。在我們的範例中，我們將在此處啟動網路請求並使用回呼偵聽請求的結果。我們也使用回調來更新本地狀態。由於我們處於功能元件中，因此該本地狀態當然是使用useState實現的。程式碼區塊 4 顯示了帶有鉤子的網路請求變體。 執行效果函數的時間和頻率取決於傳遞給useEffect的第二個參數。這是效果函數所依賴的變數數組。 React 會觀察數組中的值，並且僅在其中至少有一個值自上次以來發生變更時才執行效果函數。通常，變數是來自useState掛鉤的 props 或 state 變數。例如，如果網路請求取決於使用者的輸入參數，則該參數應出現在useEffect數組中。
頁:
[1]