ReactJS - Hook 入門

在 React 16.8 之前，函式元件只是無狀態元件。要在元件中新增狀態，需要將函式元件轉換為基於類的元件。此外，函式元件沒有操作元件生命週期事件的選項。為了在函式元件中啟用狀態和生命週期事件，React 引入了一個名為 Hooks 的新概念。

Hooks 是普通的 JavaScript 函式，可以訪問其使用/應用到的元件的狀態和生命週期事件。通常，hook 以 use 關鍵字開頭。React 提供了一些內建的 hook，並允許建立自定義 hook。

內建 Hooks

讓我們瞭解一下 React 中可用的 hook 列表及其基本用法。

useState - 用於操作元件的狀態。
useReducer - 使用 reducer 概念的 useState hook 的高階版本。
useEffect - 用於掛鉤到元件的生命週期。
useLayoutEffect - 與 useEffect 類似，但在所有 DOM 變動之後或 DOM 將要繪製到螢幕上之前同步觸發。
useContext - 在元件內部提供對上下文提供程式的訪問。
useMemo - 用於返回變數/函式的記憶版本，該版本僅根據提供的預定義依賴項集進行更改。這將減少昂貴計算的重新計算次數，並提高應用程式的效能。
useCallback - 返回回撥函式的記憶版本，該版本僅根據提供的預定義依賴項集進行更改。
useRef - 透過 React ref 物件提供對原始 DOM 節點的訪問。
useImperativeHandle - 用於將子元件中基於 ref 的值暴露給父元件。
useDeferredValue - 用於推遲值，類似於去抖動或節流以推遲更新。
useDebugValue - 用於在 React DevTools 中顯示自定義 hook 的標籤。
useTransition - 用於識別轉換的掛起狀態。
useId - 用於為應用程式中的元素建立唯一 ID。

應用 Hooks

讓我們學習如何透過建立一個應用程式在函式元件中使用 hook。

使用 create-react-app 建立一個 React 應用程式，並使用以下命令啟動應用程式：

create-react-app myapp
cd myapp
npm start

接下來，讓我們建立一個新的函式元件 HelloWorld (src/components/HelloWorld.js)，它呈現一個輸入元素，並根據使用者輸入到輸入元素中的資料呈現問候訊息。

import { useState } from 'react';
export default function HelloWorld() {
   const [name, setName] = useState("World")
   return (
      <div style={{ textAlign: "center", padding: "5px" }}>
         <input id="name" name="name"
            value={name}
            onChange={(e) => setName(e.target.value)} />
         <div>Hello {name}</div>
      </div>
   )
}

這裡：

useState 是一個 hook，它接收初始值並返回一個狀態和一個更新狀態的函式。它接收 World 作為初始值，並返回一個包含兩項的陣列：a) 狀態的初始值 (name) 和 b) 更新狀態的函式 (setName)。使用的語法是陣列解構語法，用於將陣列值獲取並設定為 name 和 setName 變數。
input 是一個帶有附加 onChange 事件的 React 輸入元素。onchange 事件透過 event.target.value 獲取使用者更新的值，並使用 setName 函式將其設定為當前狀態。
每當使用者更新輸入時，onchange 事件都會觸發並更新狀態，這反過來又會觸發元件的渲染函式。

接下來，讓我們將我們的元件應用到我們的應用程式 (App.js) 中，如下所示：

import './App.css';
import HelloWorld from './components/HelloWorld';
function App() {
   return (
      <HelloWorld />
   );
}
export default App;

最後，開啟瀏覽器並透過更改輸入值來檢查結果。訊息會在輸入更改時更新，如下所示：

Hooks 的優點

與基於類的元件一起使用時，函式元件比基於類的元件具有許多優點。它們如下：

Hooks 易於理解且快速上手。
在大型應用程式中，可以將應用程式的複雜性保持在最低限度。在基於類的元件中，隨著專案的增長，複雜性（狀態管理和處理生命週期事件）也會增長。
類（元件）中的 this 對於 JavaScript 程式設計初學者來說很難理解。由於函式元件和 hook 不依賴於 this，因此開發人員可以快速開始使用 React 進行編碼，而無需陡峭的學習曲線。
有狀態邏輯可以在元件之間輕鬆重用。
函式元件可以與基於類的元件一起使用，這使得它可以輕鬆地應用於任何規模的現有專案。
與基於類的元件相比，函式元件可以用幾行程式碼編寫。

Hooks 的缺點

Hooks 是建立元件的替代方法，它也有一些缺點。它們如下：

Hooks 只能在頂級呼叫，應避免在條件、迴圈或巢狀函式中使用。
Hooks 是專門的功能，它們可能並不適合某些情況，我們可能需要恢復到基於類的元件。
React 處理 hook 的內部機制而不公開核心進行最佳化，這使得它不太靈活，並且不適合某些場景。

總結

Hooks 是一種相對較新的建立元件的方式。大量的專案仍在使用基於類的元件。將這些專案中的元件從基於類轉換為基於函式在實踐中是不可能的，我們必須忍受它。相反，我們可以分階段轉換應用程式。

列印頁面