34 使用Context进行状态管理之Context的创建与使用

在前面一章中，我们讨论了 React Hooks 的使用及一些注意事项。Hooks 使我们能够在函数组件中管理状态，简化组件的逻辑。但在复杂的应用中，多个组件之间的状态共享有时会变得非常麻烦。为了解决这个问题，React 提供了 Context API。它允许我们在组件树中轻松地传递数据，而不必通过每一层的 props 进行传递。

在本章中，我们将深入了解如何创建和使用 Context。

创建一个Context

在 React 中，创建 Context 是一件非常简单的事情。我们需要使用 React.createContext() 方法来创建一个新的 Context对象。下面是一个简单的例子：

import React, { createContext } from 'react';

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

在这个示例中，我们创建了一个名为 ThemeContext 的 Context 对象。这个对象包含了两个组件：Provider 和 Consumer。

使用Context.Provider

一旦我们创建了 Context，我们需要通过 Provider 来传递数据。Provider 允许我们指定一个 value 属性，任何使用该 Context 的组件都可以访问到这个值。来看一个实例：

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

const ThemeContext = createContext();

const App = () => {
    const [theme, setTheme] = useState('light'); // 定义初始主题

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

// 子组件示例
const Toolbar = () => {
    return (
        <div>
            <ThemeButton />
        </div>
    );
};

const ThemeButton = () => {
    return (
        <ThemeContext.Consumer>
            {({ theme, setTheme }) => (
                <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
                    当前主题: {theme}
                </button>
            )}
        </ThemeContext.Consumer>
    );
};

export default App;

在上述代码中：

1. 我们创建了一个 ThemeContext 并在 App 组件中使用 ThemeContext.Provider 来提供一个主题和设置主题的方法。
2. 在 Toolbar 组件中，我们没有直接传递 theme 和 setTheme，而是通过 ThemeContext.Consumer 在 ThemeButton 中访问它们。
3. 当我们点击按钮时，会切换主题值。

使用Context的优势

使用 Context 的主要优势是消除了 “prop drilling” 问题，即不需要逐层传递 props。只需要将数据集中在需要的组件树层级即可。

例如，如果我们有一个深层嵌套的组件，需要获取 theme，就不必在中间的每个组件中传递 theme 和 setTheme。只需在最顶层的 Provider 中设置一次，然后在任何需要的组件中消费即可。

小结

在本章节中，我们学习了如何创建和使用 Context。通过 Provider 和 Consumer，我们可以轻松传递数据，而不必担心过多的 props 传递。这为我们在 React 应用中进行状态管理提供了很大的灵活性。

在下一章中，我们将继续探讨如何使用 useContext Hook，使得使用 Context 变得更加简单和优雅。通过 useContext，我们可以在函数组件中更直观地使用 Context，消除 Consumer 的使用。敬请期待！