解釋一下 React Hooks

React Hooks 是讓您無需編寫類別即可使用狀態和其他 React 功能的函數。它們在 React 16.8 中引入，使功能元件能夠處理狀態管理、生命週期事件和副作用等邏輯。

定制掛鉤需要什麼？

自訂 React Hooks 可讓您跨多個元件提取和重複使用邏輯。它們透過將狀態邏輯封裝到函數中來幫助保持組件清潔並減少重複。自訂 Hook 遵循與內建 Hook 相同的規則（例如，它們可以使用其他 Hook，如 useState、useEffect 等）。

顯示代碼：

import React, { useState } from 'react';


// Custom Counter Hooks
const useCounter = (initialValue = 0) => {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(value=>value   1);
  const decrement = () => setCount(value=>value - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
};
export default useCounter;

import useCounter from './useCounter';

const Counter = () => {

  // Using Counter Hooks
  const { count, increment, decrement, reset } = useCounter();

  return (
    

      
{count}
      Increment
      Decrement
      Reset
    
  );
};

自訂 Hook 規則

僅在頂層呼叫鉤子：不要在循環、條件或巢狀函數內呼叫鉤子。

僅從 React 函數呼叫鉤子： 鉤子應該在函數式元件或其他自訂鉤子中使用。