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中文网其他相关文章！