28 使用 Context API 进行全局状态管理

在 React 中，状态管理是一个常见的需求。Context API 是一种用于在组件树中传递数据的机制，它能够解决“属性钻取”问题，并且可以很好地管理全局状态。

什么是 Context API

Context API 允许你通过组件树的上下文来共享数据，而不必通过每个组件的 props 进行传递。这使得在不同层级的组件中都能方便地访问共享的状态，适合用于全局状态管理。

创建 Context

首先，我们需要创建一个 Context。你可以使用 React 提供的 createContext 函数来创建一个新的上下文。

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

// 创建一个 Context
const MyContext = createContext();

const MyProvider = ({ children }) => {
    // 定义全局状态
    const [state, setState] = useState({ user: null, theme: 'light' });

    // 定义一个更新状态的函数
    const updateUser = (user) => {
        setState((prevState) => ({ ...prevState, user }));
    };

    const updateTheme = (theme) => {
        setState((prevState) => ({ ...prevState, theme }));
    };

    return (
        <MyContext.Provider value={{ state, updateUser, updateTheme }}>
            {children}
        </MyContext.Provider>
    );
};

export { MyContext, MyProvider };

在上面的代码中，我们创建了一个 MyContext 和一个 MyProvider 组件。MyProvider 组件维护我们的全局状态，并通过上下文提供状态和更新状态的函数。

使用 Context

1. 包装你的组件

在应用的根组件中使用 MyProvider，以使得整个组件树能够访问上下文。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { MyProvider } from './MyContext';

ReactDOM.render(
    <MyProvider>
        <App />
    </MyProvider>,
    document.getElementById('root')
);

2. 通过 Context 访问状态

在需要访问全局状态的组件中，你可以使用 useContext 钩子来获取上下文的值。

import React, { useContext } from 'react';
import { MyContext } from './MyContext';

const UserProfile = () => {
    const { state, updateUser } = useContext(MyContext);

    return (
        <div>
            <h1>User Profile</h1>
            {state.user ? (
                <p>Welcome, {state.user.name}!</p>
            ) : (
                <p>No user logged in.</p>
            )}
            <button onClick={() => updateUser({ name: 'John Doe' })}>
                Log in as John Doe
            </button>
        </div>
    );
};

export default UserProfile;

在这个 UserProfile 组件中，我们通过 useContext(MyContext) 获取全局状态和更新用户的函数，并渲染用户信息。

3. 更新全局状态

当点击按钮时，我们调用 updateUser 函数来更新全局状态。由于上下文会订阅状态的变化，当状态改变时，所有使用该上下文的组件都会重新渲染。

综合示例

下面是一个综合示例，演示如何在应用中使用 Context API 进行全局状态管理。

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

// 创建 Context
const MyContext = createContext();

// 提供者组件
const MyProvider = ({ children }) => {
    const [state, setState] = useState({ user: null, theme: 'light' });
    
    const updateUser = (user) => setState((prevState) => ({ ...prevState, user }));
    const updateTheme = (theme) => setState((prevState) => ({ ...prevState, theme }));

    return (
        <MyContext.Provider value={{ state, updateUser, updateTheme }}>
            {children}
        </MyContext.Provider>
    );
};

// 子组件
const UserProfile = () => {
    const { state, updateUser } = useContext(MyContext);

    return (
        <div>
            <h1>User Profile</h1>
            {state.user ? (
                <p>Welcome, {state.user.name}!</p>
            ) : (
                <p>No user logged in.</p>
            )}
            <button onClick={() => updateUser({ name: 'John Doe' })}>
                Log in as John Doe
            </button>
        </div>
    );
};

// 应用组件
const App = () => {
    return (
        <div>
            <h1>My Application</h1>
            <UserProfile />
        </div>
    );
};

// 渲染
import ReactDOM from 'react-dom';
ReactDOM.render(
    <MyProvider>
        <App />
    </MyProvider>,
    document.getElementById('root')
);

总结

使用 Context API 可以方便地在 React 应用中进行全局状态管理。通过创建上下文、包装组件并在需要的地方使用上下文，你可以轻松地共享和更新状态。记住，虽然 Context API 是强大的工具，但在复杂应用中，使用其他状态管理库（如 Redux）可能会更合适，特别是在组件间需要更加复杂的状态共享时。