建立你自己的鉤子

mstmahmuda11121

有兩種特殊情況：如果傳入空數組，則在元件掛載後執行一次效果函數，與componentDidMount類似。但是，如果完全省略第二個參數，React 將在每次渲染時再次執行效果函數。 回到範例：目前兩個程式碼範例中都存在一個錯誤：如果在網路請求完成之前從元件樹中刪除元件（例如因為使用者立即導覽到其他地方），則元件實例可能會停止。結果我們得到了空指針異常。為了使用類別變體解決這個問題，需要另一個名為 componentWillUnmount 的生命週期，所有清理工作都可以在其中進行。 在 hooks 變體中，這種情況已經在useEffect鉤子中直接提供：effect 函數可以反過來傳回一個函數，一旦元件被刪除，函數就會被 React 執行一次。其程式碼可以在程式碼區塊 5 中看到。


從這裡你已經可以看到useState和類別組件的生命週期方法之間的區別：生命週期遵循 沙烏地阿拉伯 電話號碼 與組件本身密切相關的思維模型，而useEffect鉤子則面向經常遇到的用例，即執行特定的用例一副作用取決於某些變數。為了用生命週期乾淨地實現這一點，通常需要幾個這樣的生命週期方法：如果請求依賴於本地狀態或道具，則還必須實現它componentDidMount以及componentDidUpdate清理工作componentWillUnmount。雖然使用useEffect可以將整個邏輯（包括清理工作）緊湊地總結在一個地方，甚至可以在必要時作為自訂掛鉤重用，但使用類別方法時，邏輯可以分散在多個方法中。 建立你自己的鉤子 除了useState和useEffect 之外， React 還附帶了許多其他鉤子，用於各種用例，例如useRef來存取 DOM 元素或useContext來使用 React 的Context API 。




同樣令人興奮的是可以基於現有的鉤子構建您自己的自訂鉤子。透過這種方式，可以封裝常用的功能並可供重複使用。 React 社群的許多第三方函式庫（例如Redux或 GraphQL 函式庫Apollo Client）已經提供了具有鉤子的變體。網路上還有一些有用的鉤子集合，您可以使用它們或從中獲得靈感。 使用“useMedia”鉤子的範例，我們想了解如何開發自己的鉤子。 useMedia掛鉤旨在提供對 MediaQuery 查詢的訪問，否則該查詢主要在 CSS 樣式中發揮作用。例如，您可以檢查寬度是否低於某個最小值，以便調整行動裝置的佈局。另一個例子是詢問使用者是否喜歡深色配色方案。查詢深色模式的查詢語句為( prefers-color-scheme: dark)，例如min-width: 600px最小寬度使用( )。