⭐任務說明

😸 學習使用 Custom Hook

Custom Hook 是什麼

• React 提供可以依照邏輯自行建立 Hook
• 在開發過程中遇到需要重複使用的函式，可以把邏輯抽離出來建立成一個 Hook
• 自行建立的 Hook 一樣必須是使用 use 開頭

試試看

import { useState } from "react";

// 建立自定義 Hook
function useCounter(initValue) {
  const [count, setCount] = useState(initValue);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    if (count > 0) {
      setCount(count - 1);
    } else {
      alert("error!");
    }
  };

  return { count, increment, decrement };
}

export default function CustomApp() {
  // 自定義的 Hook
  const { count, increment, decrement } = useCounter(0);

  return (
    <div>
      <p>計數：{count}</p>
      <button onClick={increment}>+ 1</button>
      <button onClick={decrement}>- 1</button>
    </div>
  );
}

結語

透過自定義 Hook 讓相同的邏輯可以重複使用，我們下個任務見！