React 狀態管理最佳實踐

狀態管理是 React 開發中最重要的議題之一。本文將探討不同場景下的最佳實踐。

本地狀態 vs 全域狀態

何時使用本地狀態

對只在單一元件內使用的資料,使用 useState 就足夠了:

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

何時需要全域狀態

以下情況建議使用全域狀態:

多個不相關的元件需要共享資料
需要在深層嵌套的元件間傳遞資料
狀態需要持久化

Context API 使用指南

建立 Context

Context 是 React 內建的狀態共享機制:

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
  
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

避免過度使用

Context 的缺點:

所有消費者都會在 Context 值變化時重新渲染
不適合頻繁變化的狀態
除錯較困難

第三方狀態管理工具

Zustand - 輕量級選擇

Zustand 提供簡潔的 API:

import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

Redux Toolkit - 企業級方案

對於大型應用,Redux Toolkit 提供:

可預測的狀態更新
強大的開發工具
中間件支援
時間旅行除錯

效能優化

使用 useMemo 和 useCallback

避免不必要的重新計算:

const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b);
}, [a, b]);

const handleClick = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

狀態分割

將狀態分割成更小的單元:

減少不必要的重新渲染
提高程式碼可維護性
更容易測試

伺服器狀態管理

React Query 的優勢

React Query 專為伺服器狀態設計:

function Users() {
  const { data, isLoading } = useQuery("users", fetchUsers);
  
  if (isLoading) return <div>Loading...</div>;
  return <UserList users={data} />;
}

優點:

自動快取
背景重新獲取
樂觀更新
請求去重

最佳實踐總結

從簡單開始:優先使用 useState 和 props
按需升級:需要時才引入 Context 或狀態管理庫
分離關注點:伺服器狀態和客戶端狀態應該分開管理
效能為先:使用 memo、useMemo 和 useCallback 優化

結論

選擇正確的狀態管理策略能大幅提升開發效率和應用效能。記住,沒有銀彈,根據專案需求選擇最適合的方案才是王道。