React Context API 入門教學 | 學習筆記
React Context API 是 React 提供的一種方式，讓我們能夠在組件樹中傳遞資料，而不需要一層層地使用 props。Context API 可以解決多層嵌套組件的傳遞問題，讓我們在深層組件中輕鬆訪問到全局狀態。本文將介紹如何使用 React Context API，並提供一個簡單的範例來展示其實際應用。
什麼是 React Context API
React Context API 是 React 的一個內建功能，它可以讓我們在組件樹中共享資料，避免多層嵌套的 props 傳遞。Context 主要由三個部分組成：
- React.createContext()：創建一個 Context 物件。
- Provider：這是 Context API 中的一個組件，它用來包裹整個應用，並提供一個全局的資料源。
- Consumer：這是用來訪問 Context 資料的組件，它能夠獲取 Provider 中傳遞的資料。
使用 Context 的目的，是為了避免將相同的資料層層傳遞到每個組件，這樣可以讓應用的資料流變得更加簡潔。
使用 Context API 的步驟
步驟 1: 創建 Context
首先，我們需要使用 React.createContext() 來創建一個 Context 物件。這個物件會返回一個 Provider 和 Consumer 組件，讓我們在應用中使用。
import React from 'react';
// 創建 Context
const MyContext = React.createContext();
步驟 2: 使用 Provider 來傳遞資料
Context 的 Provider 是用來包裹應用的，它會接收一個 value 屬性，這個屬性就是要共享給整個組件樹的資料。
const App = () => {
const [user, setUser] = React.useState({ name: 'John', age: 30 });
return (
<MyContext.Provider value={user}>
<UserProfile />
</MyContext.Provider>
);
};
在這個範例中，我們將一個 user 物件傳遞給 MyContext.Provider 的 value 屬性，這樣整個組件樹中的所有子組件都能夠訪問到這個 user 資料。
步驟 3: 使用 Consumer 來接收資料
在需要使用資料的地方，我們可以使用 MyContext.Consumer 來獲取資料。Consumer 的 children 是一個函數，它會接收一個 value 參數，這個參數就是在 Provider 中傳遞的資料。
const UserProfile = () => {
return (
<MyContext.Consumer>
{(user) => (
<div>
<h1>{user.name}</h1>
<p>Age: {user.age}</p>
</div>
)}
</MyContext.Consumer>
);
};
在這個範例中，UserProfile 組件通過 Consumer 來訪問 MyContext 中的 user 資料，並渲染顯示用戶的名字和年齡。
步驟 4: 使用 useContext Hook (React 16.8 及以上)
React 16.8 引入了 useContext Hook，這樣我們可以更方便地在函數組件中使用 Context，而不需要使用 Consumer。這樣的寫法更加簡潔，並且避免了過多的嵌套。
import React, { useContext } from 'react';
const UserProfile = () => {
const user = useContext(MyContext);
return (
<div>
<h1>{user.name}</h1>
<p>Age: {user.age}</p>
</div>
);
};
使用 useContext 可以直接從 Context 中獲取資料，而不需要使用 Consumer。這使得代碼更簡潔，並提高了可讀性。
實際範例
下面是一個完整的範例，展示了如何使用 React Context API 來管理應用中的全局狀態。這個範例將包括一個用戶資料的管理，並能夠在多個組件中共享這些資料。
import React, { useState, useContext } from 'react';
// 創建 Context
const MyContext = React.createContext();
const App = () => {
const [user, setUser] = useState({ name: 'John', age: 30 });
return (
<MyContext.Provider value={user}>
<div>
<UserProfile />
<AgeUpdater />
</div>
</MyContext.Provider>
);
};
const UserProfile = () => {
const user = useContext(MyContext);
return (
<div>
<h1>{user.name}</h1>
<p>Age: {user.age}</p>
</div>
);
};
const AgeUpdater = () => {
const user = useContext(MyContext);
const setUser = useState()[1];
const updateAge = () => {
setUser({ ...user, age: user.age + 1 });
};
return (
<div>
<button onClick={updateAge}>Increase Age</button>
</div>
);
};
export default App;
範例解析
- App 組件：在
App組件中，我們使用useState定義了一個user資料，並通過MyContext.Provider將資料提供給下層組件。 - UserProfile 組件：
UserProfile使用useContext來讀取MyContext中的資料，並顯示用戶的名字和年齡。 - AgeUpdater 組件：這個組件同樣使用
useContext來讀取和更新user資料。我們在這裡定義了一個按鈕，當按下時，會更新user的年齡。
Context API 的優缺點
優點：
- 簡化資料傳遞：當我們需要在多層嵌套的組件中共享資料時，使用 Context 可以避免繁瑣的 props 傳遞。
- 可擴展性：Context 非常適合用於應用中的全局狀態管理，像是用戶認證、語言設置、主題樣式等。
缺點：
- 重新渲染問題：當
Provider中的資料變更時，所有使用該 Context 的組件都會重新渲染。對於大型應用來說，這可能會影響性能。 - 狀態過度共享：Context 主要用於共享全局資料，如果將太多不相關的資料放入同一個 Context，可能會使代碼變得難以維護。
總結
React Context API 是一個強大的工具，可以幫助我們管理應用中的全局狀態。在適當的情況下使用 Context 可以大大簡化代碼，避免深層嵌套的 props 傳遞。但也需要謹慎使用，避免過多不必要的資料共享，從而影響性能和可維護性。在開發中，我們可以根據具體需求來選擇是否使用 Context API，並搭配其他狀態管理工具（如 Redux 或 Zustand）來管理更複雜的應用狀態。