React 中的 Hooks 是什麼？

---

React Hooks 開闢了一種構建函式元件的全新方法，使我們能夠包含以前僅適用於類元件的功能，例如狀態邏輯。

React 主要利用其內建的 Hooks，useState 和 useEffect Hooks 來實現這一點。這些 Hooks j

在本文中，我們將介紹 Hooks 是什麼以及如何使用它們來建立 React 應用程式。我們還將瞭解它們如何簡化日常開發工作流程。

關於 React Hooks 的一切

正如 React 團隊所說：

• “React Hooks 是 React.js 的一項新功能，它使我們能夠在不編寫類的情況下使用狀態和其他 React 功能。”

它們透過消除對類元件和渲染方法的需求，並允許我們使用函式作為 Hooks，從而簡化了我們使用 React.js 的方式。

它們於 2018 年底隨 React 16.7 版本釋出，並於 2019 年 3 月釋出的 16.8 版本中正式釋出。

React Hooks 作為類系統的替代方案。它是一種替代 React 元件模型的方法，允許我們避免不必要的抽象，並提供一種處理狀態邏輯的替代方法，而無需繼承或高階元件 (HOC)。

它們消除了過去唯一選擇是構建類的要求，並使開發人員能夠訪問狀態和其他 React 功能。

但是，以下是一些每個開發人員都必須牢記的 Hooks 通用規則：

• Hooks 應該用在程式碼的最頂層作用域，絕不能用在迴圈、條件或巢狀函式中。

• Hooks 只能由 React 函式元件使用。

• 不要使用普通的 JavaScript 方法來呼叫 Hook。

注意 - 這些規則也適用於自定義 Hooks。

React 內建 Hooks

React 具有內建的 Hooks，即 useEffect 和 useState，允許開發人員使用程式碼片段來處理事件或資料更新。

但是，您還可以透過建立自定義 Hooks 來在元件之間重用有狀態行為。讓我們首先更詳細地瞭解一下這些內建 Hooks。

• useState Hook

  useState Hook 用於在元件記憶體儲狀態。

  useState Hook 允許您在元件內部儲存和訪問狀態，而無需使用 this.state 或 this.setState()。狀態物件可以透過 props 從父元件傳遞到子元件，或者可以使用 useState Hook 直接在子元件上設定。

• useEffect Hook

  對於像從 API 獲取資料或將其本地儲存之類的副作用，我們使用 useEffect Hook。

  它使函式元件能夠執行副作用，從而實現與 React 類中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 相同的功能，但僅使用單個 API。

什麼是“自定義 Hooks”？

當我們想要在多個元件中實現 useState 和 useEffect Hooks 的派生功能時，使用自定義 Hooks 是一個有效的選擇。

我們可以使用自定義 React Hooks 以高效且可擴充套件的方式輕鬆地在多個元件之間重用有狀態行為。此外，自定義 Hooks 會產生清晰且組織良好的程式碼庫，從而減少 React 專案中的複雜性和重複。

只要符合 React Hooks 標準，您就可以自由地開發任何您想要處理各種邏輯場景的自定義 Hook。

React Hooks 的優勢

在 React 中，Hooks 解決了一系列問題，這些問題乍一看似乎與我們在五年內建立和維護數萬個元件過程中遇到的問題無關。

無論您是在學習 React 還是使用具有類似元件架構的其他框架，您都可能熟悉其中一些問題。

我們將在這裡看到 Hooks 的引入克服了哪些困難。

易於理解的複雜元件

過去，開發人員必須維護一開始很簡單但最終變成了難以管理的狀態邏輯混亂的部分。結果，出現錯誤和不一致的情況變得司空見慣。Hooks 允許您根據其組成部分之間的關係將單個元件劃分為單獨的函式，而不是要求基於生命週期方法進行拆分。

無需類即可降低複雜性（使用函式！）

由於類的存在，學習 React 可能非常困難。道具、狀態和向下資料流是人們可以很好地掌握的概念，但在類中仍然難以理解。即使在經驗豐富的 React 開發人員中，關於函式元件和類元件之間區別的爭論也很常見。

相反，Hooks 允許您使用函式並使用更多 React 功能，而無需理解複雜的函式式或反應式程式設計技術。

易於重用有狀態邏輯

您可以使用 Hooks 從元件中移除有狀態邏輯，以便可以單獨對其進行測試並再次使用。您可以使用 Hooks 重用有狀態邏輯，而無需更改元件結構，這在以前即使是高階元件和渲染道具也難以做到。

在眾多元件之間或與社群共享 Hooks 現在變得非常簡單。

底線

React 透過可以與所有元件共享的功能來擴充套件元件模型的方式。

簡而言之，Hooks 極大地增強了我們開發靈活的 React 應用程式的能力，減少了對基於類的元件的需求。React 還提供了一些額外的 Hooks，您可以使用它們來增強這些 Hooks 的功能，並自行建立更出色的 Hooks。