---
# System prepended metadata

title: 'Day 9.  React Hooks '
tags: [React.js]

---

### 什麼叫做「Hook」

- Hook，翻譯叫做「勾」。
  - 在 React 中，Hook 是一種功能，它使你能夠在無需修改組件結構的情況下，將狀態管理和其他 React 功能添加到函數式組件中。

- React 提供了多個內建的 Hook，每個 Hook 都專注於不同的功能，例如管理狀態、處理副作用、獲取外部數據等。一些常見的 Hook 包括：

  - **useState**: 用於在函數式組件中添加狀態管理能力。
  - **useEffect**: 用於處理副作用，例如數據獲取、DOM 操作等。
  - **useContext**: 用於訪問 React 的上下文（Context）。
  - **useRef**: 提供對 DOM 元素或其他值的引用。
  - **useReducer**: 類似於 useState，但更適合處理複雜的狀態邏輯。
  - **useCallback** 和 **useMemo**: 用於優化性能，避免不必要的函數重新創建或計算。
  - **custom Hooks**：你還可以創建自己的自定義 Hook，以將重複使用的邏輯封裝起來，使代碼更具可讀性和可重用性。