ReactJS - Context: A Beginner's Guide

你好，有抱負的開發者們！今天，我們將深入ReactJS Context的精彩世界。作為你們友善的鄰居電腦老師，我將帶著初次學習這個概念時的熱情來引導你們。所以，拿起你們最喜歡的飲料，舒適地坐好，讓我們一起踏上這個令人興奮的旅程！

ReactJS - Context

React中的Context是什麼？

想像一下，你在一個家族聚會上，想和大家分享一個有趣的故事。如果你不必低聲對每個人說，而可以直接宣布一次，讓所有人都能聽到，那該有多好？React中的Context就是這樣做的！

Context提供了一種方法，讓數據能夠在組件樹中傳遞，而不需要在每個層級手動傳遞props。它設計用於共享可以被視為組件樹的“全局”數據。

當什麼時候使用Context

在我們深入探討之前，讓我們了解什麼時候應該使用Context：

當你有需要被多個不同嵌套層級的組件訪問的數據時。
當你想要避免“prop drilling”（通過不需要數據的中間組件傳遞props）時。

創建和使用Context

讓我們通過一些代碼示例來了解如何創建和使用Context。

步驟1：創建一個Context

首先，我們需要創建一個Context。我們將使用React.createContext()方法來完成這個任務。

import React from 'react';

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

export default ThemeContext;

在這個例子中，我們創建了一個ThemeContext，並設定了默認值'light'。當組件在樹中沒有匹配的Provider時，會使用這個默認值。

步驟2：提供Context

現在，我們有了Context，需要將它提供給我們的組件樹。我們使用Context.Provider組件來做到這一點。

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

function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}

function Toolbar() {
return (
<div>
<ThemedButton />
</div>
);
}

在這個例子中，我們用ThemeContext.Provider包住了Toolbar組件（以及它的所有子組件）。我們將值設為"dark"，這個值將對Provider內部的所有組件可用。

步驟3：使用Context

現在來到有趣的部分——使用我們的Context！有兩種方法可以使用Context：

Class.contextType
Context.Consumer

讓我們看看兩者：

使用`Class.contextType`

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

class ThemedButton extends React.Component {
static contextType = ThemeContext;
render() {
return <button theme={this.context}>我是一個主題按鈕！</button>;
}
}

在這個例子中，ThemedButton是一個類組件。我們將它的contextType設為我們的ThemeContext。現在，this.context將給我們提供當前的上下文值。

使用`Context.Consumer`

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

function ThemedButton() {
return (
<ThemeContext.Consumer>
{value => <button theme={value}>我是一個主題按鈕！</button>}
</ThemeContext.Consumer>
);
}

在這裡，我們使用Context.Consumer組件。它使用一個渲染屬性來將當前的上下文值傳遞給一個函數。

多個Context

有時候，你可能需要使用多個上下文。React允許你嵌套多個Context Providers：

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

function App() {
return (
<ThemeContext.Provider value="dark">
<UserContext.Provider value="John Doe">
<Toolbar />
</UserContext.Provider>
</ThemeContext.Provider>
);
}

你可以像這樣使用多個上下文：

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

function ThemedButton() {
return (
<ThemeContext.Consumer>
{theme => (
<UserContext.Consumer>
{user => (
<button theme={theme}>
{user} 正在使用 {theme} 主題
</button>
)}
</UserContext.Consumer>
)}
</ThemeContext.Consumer>
);
}

更新Context

上下文也可以是動態的。讓我們看一個更新我們主題的例子：

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

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

return (
<ThemeContext.Provider value={{ theme, setTheme }}>
<Toolbar />
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
切換主題
</button>
</ThemeContext.Provider>
);
}

在這個例子中，我們使用useState hook來管理我們的主題狀態。我們將當前主題和setTheme函數作為上下文值傳遞。

Context方法

以下是我們所介紹的主要Context方法的總結：

方法	描述
React.createContext()	創建一個Context對象
Context.Provider	為組件提供一個上下文值
Class.contextType	讓類組件能夠使用單一上下文
Context.Consumer	讓函數組件訂閱一個上下文