ReactJS - 使用useContext：初學者指南

你好，有抱負的React開發者！今天，我們將深入React最強大的功能之一：useContext Hook。作為你友好的人工智能編程老師，我將一步步地指導你理解這個概念。別擔心你對編程還是新手——我們會從基礎開始，然後逐步進階！

在React中Context是什麼？

在我們跳進useContext之前，讓我們先了解在React中Context是什麼。想像你正在組織一個大家庭晚宴。你有一瓶特別的醬汁需要傳遞給在座的人。如果你不必一個接一個地傳遞（這在React中就像props穿透），而是可以直接把它放在桌子的中央，讓每個人都能夠夠到，豈不是更容易？在React中，Context基本上就是這麼做的——它提供了一種方法，讓數據能夠在組件樹中傳遞，而不需要在每個層級手動傳遞props。

理解useContext

現在，useContext是一個Hook，讓我們能夠在我們的函數組件中輕鬆地使用這個Context。這就像給晚宴上的每個人一個直接訪問特別醬汁的方法，而不需要請求其他人傳遞。

useContext的簽名

讓我們看看我們如何使用useContext：

const value = useContext(MyContext)

這裡的每一部分意味著：

• value：這是當前的Context值
• MyContext：這是Context對象（使用React.createContext創建）

這就是這麼簡單！但讓我們用一個真實世界的例子來進一步分解。

通過Hook使用Context

讓我們為我們的應用程序創建一個簡單的題目切換器。我們將使用Context來存儲當前題目，並使用useContext在我們的組件中訪問它。

首先，讓我們創建我們的Context：

// ThemeContext.js
import React from 'react';

const ThemeContext = React.createContext('light');

export default ThemeContext;

現在，讓我們創建一個使用這個Context的組件：

// ThemedButton.js
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

function ThemedButton() {
const theme = useContext(ThemeContext);

return (
<button style={{ background: theme === 'light' ? '#fff' : '#000',
color: theme === 'light' ? '#000' : '#fff' }}>
我是一個{theme}題目的按鈕！
</button>
);
}

export default ThemedButton;

在這個例子中，useContext(ThemeContext)給我們當前的題目值。然後我們使用這個值來設置我們按鈕的樣式。

現在，讓我們看看我們如何在應用程序中提供這個Context：

// App.js
import React from 'react';
import ThemeContext from './ThemeContext';
import ThemedButton from './ThemedButton';

function App() {
return (
<ThemeContext.Provider value="dark">
<div>
<h1>歡迎來到我們的題目應用程序！</h1>
<ThemedButton />
</div>
</ThemeContext.Provider>
);
}

export default App;

在這裡，我們將應用程序包在ThemeContext.Provider中，並將值設為"dark"。這意味著這個提供者的任何組件都可以使用useContext來訪問這個題目值。

更新Context

現在，如果我們想要讓用戶切換題目該怎麼辦？我們可以通過更新我們的Context值來做到這點。讓我們修改我們的App組件：

// App.js
import React, { useState } from 'react';
import ThemeContext from './ThemeContext';
import ThemedButton from './ThemedButton';

function App() {
const [theme, setTheme] = useState('light');

const toggleTheme = () => {
setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
};

return (
<ThemeContext.Provider value={theme}>
<div>
<h1>歡迎來到我們的題目應用程序！</h1>
<ThemedButton />
<button onClick={toggleTheme}>切換題目</button>
</div>
</ThemeContext.Provider>
);
}

export default App;

現在，我們使用狀態來管理我們的題目，並添加了一個按鈕來切換它。當題目改變時，所有使用useContext(ThemeContext)的組件將自動重新渲染新值。

結論

就是这样！我們已經涵蓋了React中useContext的基本知識。讓我們回顧一下主要點：

1. Context提供了一種方法，讓數據能夠在組件樹中傳遞，而不需要props穿透。
2. useContext是一個Hook，讓我們能夠在函數組件中輕鬆地使用Context。
3. 要使用useContext，我們首先需要使用React.createContext創建一個Context。
4. 我們可以通過改變提供者組件的value屬性來更新Context。

記住，雖然Context很強大，但它並不是總是最佳解決方案。對於只需要傳遞一兩個層級的簡單props，通常使用常规的props傳遞更清晰。把Context想像成家庭晚宴上的特別醬汁——當你需要廣泛分享某樣東西時使用它，但不要過度使用！

希望這個指南能夠幫助你解開useContext的神秘。繼續練習，很快你將成為React Context的專家！快樂編程！

方法	描述
React.createContext	創建一個Context對象
useContext	用於消耗Context值的Hook
<Context.Provider>	用於為其子組件提供Context值的組件

Credits: Image by storyset