在 React 中，使用 useContext 進行全局狀態管理是一種有效的方法，尤其在需要在多個組件之間共享狀態時。useContext 允許你在組件樹中傳遞數據，而無需通過每個組件的 props 逐層傳遞。以下是關于如何使用 useContext 進行全局狀態管理的詳細指南。
1. 理解 Context API
Context API 概述
Context API 是 React 提供的一種機制，用于在組件樹中共享數據，而不必通過 props 層層傳遞。它可以幫助你解決“props drilling”問題，即在組件樹中深層傳遞 props。
創建 Context
使用 React.createContext() 創建一個 Context 對象。該對象包含一個 Provider 和一個 Consumer。
import React, { createContext } from 'react';const MyContext = createContext();
2. 創建 Context 提供者
創建一個 Context 提供者組件，使用 useState 或 useReducer 管理全局狀態，并通過 Context Provider 將狀態傳遞給組件樹。
示例：全局狀態管理
import React, { createContext, useState } from 'react';// 創建 Context
const GlobalContext = createContext();const GlobalProvider = ({ children }) => {const [state, setState] = useState({ count: 0 });const increment = () => {setState(prevState => ({ count: prevState.count + 1 }));};const decrement = () => {setState(prevState => ({ count: prevState.count - 1 }));};return (<GlobalContext.Provider value={{ state, increment, decrement }}>{children}</GlobalContext.Provider>);
};export { GlobalContext, GlobalProvider };
3. 使用 Context 提供者
在應用的根組件中使用 GlobalProvider，將上下文提供給整個組件樹。
示例：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { GlobalProvider } from './GlobalContext';ReactDOM.render(<GlobalProvider><App /></GlobalProvider>,document.getElementById('root')
);
4. 在子組件中消費 Context
使用 useContext Hook 在需要訪問全局狀態的子組件中消費 Context。
示例：消費全局狀態
import React, { useContext } from 'react';
import { GlobalContext } from './GlobalContext';const Counter = () => {const { state, increment, decrement } = useContext(GlobalContext);return (<div><h1>計數: {state.count}</h1><button onClick={increment}>增加</button><button onClick={decrement}>減少</button></div>);
};export default Counter;
5. 組合多個 Context
在一個應用中，你可能需要管理多個狀態。可以創建多個 Context，并在需要的組件中組合使用。
示例：多個 Context
import React, { createContext, useState, useContext } from 'react';// 創建計數 Context
const CountContext = createContext();// 創建用戶 Context
const UserContext = createContext();const CountProvider = ({ children }) => {const [count, setCount] = useState(0);const increment = () => setCount(count + 1);const decrement = () => setCount(count - 1);return (<CountContext.Provider value={{ count, increment, decrement }}>{children}</CountContext.Provider>);
};const UserProvider = ({ children }) => {const [user, setUser] = useState({ name: 'Guest' });const updateUser = (name) => setUser({ name });return (<UserContext.Provider value={{ user, updateUser }}>{children}</UserContext.Provider>);
};const App = () => {return (<CountProvider><UserProvider><Counter /><User /></UserProvider></CountProvider>);
};const Counter = () => {const { count, increment, decrement } = useContext(CountContext);return (<div><h1>計數: {count}</h1><button onClick={increment}>增加</button><button onClick={decrement}>減少</button></div>);
};const User = () => {const { user, updateUser } = useContext(UserContext);return (<div><h1>用戶: {user.name}</h1><button onClick={() => updateUser('John Doe')}>更新用戶</button></div>);
};export default App;
6. 使用 useReducer 管理復雜狀態
在需要管理復雜狀態的情況下，可以結合 useReducer 和 useContext 來實現更好的狀態管理。
示例：使用 useReducer
import React, { createContext, useReducer } from 'react';// 創建 Context
const GlobalContext = createContext();// 定義初始狀態
const initialState = { count: 0 };// 定義 reducer
const reducer = (state, action) => {switch (action.type) {case 'increment':return { ...state, count: state.count + 1 };case 'decrement':return { ...state, count: state.count - 1 };default:throw new Error(`Unknown action: ${action.type}`);}
};const GlobalProvider = ({ children }) => {const [state, dispatch] = useReducer(reducer, initialState);const increment = () => dispatch({ type: 'increment' });const decrement = () => dispatch({ type: 'decrement' });return (<GlobalContext.Provider value={{ state, increment, decrement }}>{children}</GlobalContext.Provider>);
};const Counter = () => {const { state, increment, decrement } = useContext(GlobalContext);return (<div><h1>計數: {state.count}</h1><button onClick={increment}>增加</button><button onClick={decrement}>減少</button></div>);
};// 用法同上
7. 性能優化
1. 避免不必要的渲染
在大型應用中，使用 Context 可能會導致性能問題，因為任何上下文值的變化都會導致所有消費該上下文的組件重新渲染。可以使用 React.memo 或者將上下文按功能拆分。
2. 使用選擇性上下文
如果只需要上下文的部分數據，可以創建多個上下文，以最小化重渲染。
8. 注意事項
- 調試：使用 React DevTools 進行調試，查看 Context 的值和消費情況。
- 上下文嵌套：避免過多的上下文嵌套，可能導致代碼復雜性增加。
- 類型安全：如果使用 TypeScript，確保為上下文類型定義接口，以提高代碼的可維護性。
)
