useContext：React Hooks

React 中的 useContext 和兩個實用的迷你項目

介紹

在 React 中，管理元件之間的資料至關重要，尤其是在多個元件需要存取相同資料的大型應用程式中。 Prop 鑽取（將 props 傳遞到元件樹的多個層級）很快就會變得很麻煩。這就是 React 的 useContext hook 的閃光點。 useContext 允許您跨元件共享數據，而無需手動傳遞 props，這使其成為狀態管理的寶貴工具。

在本文中，我們將首先詳細解釋 useContext、其語法及其優點。然後，我們將透過建構兩個迷你項目來鞏固這種理解：

1. 主題切換器：一個簡單的主題切換器，用於展示 useContext 如何管理全域狀態。
2. 使用者驗證狀態：處理使用者登入狀態的應用程序，示範如何在實際用例中使用 useContext。

在本教學結束時，您將具備在任何 React 專案中自信地使用 useContext 的能力。

---

什麼是useContext？

useContext 的基礎知識

useContext 是一個 React hook，允許元件直接訂閱上下文。它使元件能夠從元件樹中位於其上方的最近的提供者存取全域數據，從而有助於避免 prop 鑽取的麻煩。

useContext 的語法

以下是建立和使用上下文的基本語法：

import React, { useContext, createContext } from 'react';

const MyContext = createContext(defaultValue); // Step 1: Create a context

function MyComponent() {
    const contextValue = useContext(MyContext); // Step 2: Use the context
    return <div>{contextValue}</div>;
}

解釋

1. 建立上下文：createContext 初始化一個上下文對象，該對象保存我們要共享的資料。 defaultValue 參數是可選的，但如果沒有找到 Provider，可以用作後備參數。
2. 透過 useContext 使用上下文：在元件內部，我們使用 useContext(MyContext) 來存取上下文的目前值。該值由最近的 決定。組件樹中組件的上方。

上下文提供者和消費者的範例

import React, { useContext, createContext } from 'react';

const ThemeContext = createContext('light'); // default theme is light

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

function DisplayTheme() {
    const theme = useContext(ThemeContext); // Consuming the context
    return <p>The current theme is {theme}</p>;
}

function App() {
    return (
        <ThemeProvider>
            <DisplayTheme />
        </ThemeProvider>
    );
}

在此範例中：

• ThemeContext 是我們的上下文，使用預設值「light」進行初始化。
• ThemeProvider 包裝 DisplayTheme 並提供 value="dark"，使「dark」成為 ThemeProvider 中的當前主題。
• DisplayTheme 元件使用 useContext(ThemeContext) 來存取主題並渲染它。

這涵蓋了基礎知識。現在，讓我們深入研究項目，將這些知識應用到實際場景中。

---

迷你專案 1：建構主題切換器

我們的第一個專案是一個簡單的主題切換器，它將示範如何使用 useContext 來管理主題的全域應用程式狀態。

第 1 步：設定上下文

import React, { useContext, createContext } from 'react';

const MyContext = createContext(defaultValue); // Step 1: Create a context

function MyComponent() {
    const contextValue = useContext(MyContext); // Step 2: Use the context
    return <div>{contextValue}</div>;
}

這裡，ThemeContext 提供兩個值：目前主題和切換它的函數。提供程式包裝應用程式元件，使主題和切換功能全域可用。

第 2 步：使用元件中的上下文

import React, { useContext, createContext } from 'react';

const ThemeContext = createContext('light'); // default theme is light

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

function DisplayTheme() {
    const theme = useContext(ThemeContext); // Consuming the context
    return <p>The current theme is {theme}</p>;
}

function App() {
    return (
        <ThemeProvider>
            <DisplayTheme />
        </ThemeProvider>
    );
}

第 3 步：在主應用程式中使用提供程序

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
    const [theme, setTheme] = useState('light');
    const toggleTheme = () => setTheme(theme === 'light' ? 'dark' : 'light');

    return (
        <ThemeContext.Provider value={{ theme, toggleTheme }}>
            {children}
        </ThemeContext.Provider>
    );
}

現在，您可以透過點擊按鈕在淺色和深色主題之間切換，主題狀態會顯示在旁邊。該專案示範了 useContext 如何允許多個元件共享全域狀態變更並對全域狀態變更做出反應。

---

迷你專案 2：管理使用者身份驗證

對於第二個項目，讓我們建立一個簡單的應用程序，使用 useContext 追蹤使用者的身份驗證狀態。

第 1 步：建立身份驗證上下文

function ThemeToggler() {
    const { theme, toggleTheme } = useContext(ThemeContext); // Access context values
    return (
        <button onClick={toggleTheme}>
            Switch to {theme === 'light' ? 'dark' : 'light'} mode
        </button>
    );
}

function DisplayTheme() {
    const { theme } = useContext(ThemeContext);
    return <p>Current Theme: {theme}</p>;
}

步驟2：建立登入和登出組件

function App() {
    return (
        <ThemeProvider>
            <DisplayTheme />
            <ThemeToggler />
        </ThemeProvider>
    );
}

export default App;

步驟3：顯示使用者狀態

import React, { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

export function AuthProvider({ children }) {
    const [isAuthenticated, setIsAuthenticated] = useState(false);

    const login = () => setIsAuthenticated(true);
    const logout = () => setIsAuthenticated(false);

    return (
        <AuthContext.Provider value={{ isAuthenticated, login, logout }}>
            {children}
        </AuthContext.Provider>
    );
}

第 4 步：在應用程式中組合元件

function LoginButton() {
    const { login } = useContext(AuthContext); // Access login function
    return <button onClick={login}>Login</button>;
}

function LogoutButton() {
    const { logout } = useContext(AuthContext); // Access logout function
    return <button onClick={logout}>Logout</button>;
}

現在，您有一個簡單的身份驗證狀態應用程序，其中登入和登出按鈕可以更新應用程式中的使用者狀態。這個專案示範了 useContext 如何在現實場景中處理應用程式的狀態。

---

結論

透過這兩個項目，您已經了解了 useContext 如何簡化元件之間的資料共享，而無需進行 prop 鑽取。主題切換器和身份驗證狀態項目為有效管理全域狀態提供了實用的見解。無論您是切換主題還是處理使用者身份驗證，useContext 都提供了一個強大的工具來建立高效且有組織的應用程式。

以上是useContext：React Hooks的詳細內容。更多資訊請關注PHP中文網其他相關文章！