內建 React Hooks

狀態 Hooks

狀態讓元件可以“記住”像是使用者輸入的資訊。例如，表單元件可以使用狀態來儲存輸入值，而圖片庫元件可以使用狀態來儲存所選圖片的索引。

要將狀態添加到元件，請使用以下 Hooks 之一

• useState 宣告一個可以直接更新的狀態變數。
• useReducer 宣告一個狀態變數，其更新邏輯位於reducer 函式內。

function ImageGallery() {
  const [index, setIndex] = useState(0);
  // ...

Context Hooks

Context 讓元件可以從遠程父元件接收資訊，而無需將其作為 props 傳遞。例如，您的應用程式的頂層元件可以將目前的 UI 主題傳遞給下面的所有元件，無論它們有多深。

• useContext 讀取並訂閱一個 context。

function Button() {
  const theme = useContext(ThemeContext);
  // ...

Ref Hooks

Refs 讓元件可以保存一些不用於渲染的資訊，例如 DOM 節點或 timeout ID。與狀態不同，更新 ref 不會重新渲染您的元件。Refs 是 React 範例中的“逃生出口”。當您需要使用非 React 系統（例如內建的瀏覽器 API）時，它們會很有用。

• useRef 宣告一個 ref。您可以在其中保存任何值，但最常使用它來保存 DOM 節點。
• useImperativeHandle 允許您自訂元件公開的 ref。這很少使用。

function Form() {
  const inputRef = useRef(null);
  // ...

Effect Hooks

Effects 讓元件可以連接到外部系統並與之同步。這包括處理網路、瀏覽器 DOM、動畫、使用不同 UI 程式庫編寫的 widget 以及其他非 React 程式碼。

• useEffect 將元件連接到外部系統。

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);
  // ...

Effects 是 React 範例中的“逃生出口”。不要使用 Effects 來協調應用程式中的資料流。如果您沒有與外部系統互動，您可能不需要 Effect。

useEffect 有兩個很少使用的變體，它們在時序上有所不同

• useLayoutEffect 在瀏覽器重新繪製螢幕之前觸發。您可以在這裡測量佈局
• useInsertionEffect 在 React 對 DOM 進行更改之前觸發。程式庫可以在這裡插入動態 CSS。

效能 Hook

最佳化重新渲染效能的常見方法是跳過不必要的工作。例如，您可以告訴 React 重複使用快取的計算結果，或者如果資料自上次渲染以來沒有更改，則跳過重新渲染。

要跳過計算和不必要的重新渲染，請使用以下 Hook 之一

• useMemo 讓您可以快取耗時計算的結果。
• useCallback 讓您可以在將函式定義傳遞給已最佳化的元件之前將其快取。

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

有時，您無法跳過重新渲染，因為畫面實際上需要更新。在這種情況下，您可以透過將必須同步的阻塞更新（例如在輸入框中輸入）與不需要阻塞使用者介面的非阻塞更新（例如更新圖表）分開來提高效能。

要設定渲染的優先順序，請使用以下 Hook 之一

• useTransition 讓您可以將狀態轉換標記為非阻塞，並允許其他更新中斷它。
• useDeferredValue 讓您可以延遲更新 UI 的非關鍵部分，並讓其他部分先更新。

其他 Hook

這些 Hook 主要對函式庫作者有用，在應用程式程式碼中不常使用。

• useDebugValue 讓您可以自訂 React DevTools 為您的自訂 Hook 顯示的標籤。
• useId 讓元件可以將唯一的 ID 與自身關聯。通常與無障礙 API 一起使用。
• useSyncExternalStore 讓元件可以訂閱外部 store。

• useActionState允許您管理 actions 的狀態

您自己的 Hook

您也可以將您自己的自訂 Hook 定義為 JavaScript 函式。