Zenn
😎

Map of Hooks_State

に公開
React
第一屆鐵蚊賽
tech

資料來源：
Code Bootcamp-ALL React Hooks Explained in 12 Minutes

一堆 Hooks 怎麼辦

將 Hooks 分為八個大類，分別是：

▶️ State Management | 狀態管理類
  • useState
  • useReducer
  • useSyncExternalStore
📡 Effect Hooks | 處理副作用
  • useEffect
  • useLayoutEffect
  • useInsertionEffect
🪝Ref Hooks | 引用類
  • useRef
  • useImperativeHandle
💾 Performance Hooks | 提高效能類
  • useMemo
  • useCallback
📜 Context Hooks | 上下文讀取
  • useContext
⏳ Transition Hooks | 過渡類
  • useTransition
  • useDeferredValue
🔎 Random Hooks | 隨機類
  • useDebugValue
  • useId
🔮 React 19 Hooks | React 19 的新 Hooks
  • useFormStatus
  • useFormState
  • useOptimistic
  • use

常用的 Hooks

這裡很重要，會考

useState()

這個應該是大家學 React 的時候第一個遇見，並且在未來也是用的最多的 Hooks 了，
主要用於管理狀態，狀態更新後的重新渲染。

  • 在 initial value 設定初始值
  • 值會存在 count 這個變數
  • setCount 這個變數則是用來變動

基本語法結構

  const [count, setCount] = useState(initial value)

常見實例

  1. 用來管理表單，取得使用者輸入的值
  const [value, setValue] = useState('')

  const handleChange = (e) => {
    setValue(e.target.value) //取得輸入的值
  }
  return (
    <Input type="text" value={value} onChange={handleChange} />
  )
  1. 開關元件
  const [isVisible, setIsVisible] = useState(false); //這裡使用 boolean 來控制開關

  return (
    <>
    <button onClick={() => setIsVisible(!isVisible)}>Toggle</button>
      {isVisible && <div>Content to Show/Hide</div>}
    </>
  )
  1. 變更樣式
  2. 購物車或計數器

useReducer()

用於管理比 useState 更複雜的狀態邏輯，透過 dispatch 來觸發更新：

  • 狀態之間有關聯性
  • 狀態的邏輯複雜或重複
  • 需要根據不同的 action 來做出不同的更新

如果有需要跨元件、多個頁面管理狀態的話(登入狀態、購物車資料)，會推薦使用 Redux Toolkit(RTK) 來處理

基本語法結構

  const [state, dispatch] = useReducer(reducer函式, initialState)
  1. 計數器
import { useReducer } from 'react';

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case '加一':
      return { count: state.count + 1 };
    case '減一':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      <p>目前數字：{state.count}</p>
      <button onClick={() => dispatch({ type: '加一' })}>+1</button>
      <button onClick={() => dispatch({ type: '減一' })}>-1</button>
    </>
  );
}

如果此時需要增加一個歸零的按鈕呢？
在 useState 的時候我們可能會這樣做：const Reset = () => { setCount(0) }
而 useReducer 中，是透過 dispatch 發送動作來改變狀態，而不是值，所以我們會這樣寫：

const reducer = (state, action) => {
  // 同上
  const 'reset':
    return { count: 0};
  default:
    return state;
};

const App = () => {
  // ...
  return (
    <>
    // ...
    <button onClick={() => dispatch({ type: 'reset' })}>reset</button>
    </>
  )
}

最後に

以上為我個人的基本理解，由於 Hooks 內容較多所以拆成每一個類別比較方便閱讀，如果有什麼想法也歡迎留言跟我分享，讓我可以學習更多。

看其他鐵蚊賽文章
其他的 Hooks 介紹也是從這邊~

Discussion