在上一篇中，我们详细探讨了如何创建和使用 Context。现在，我们将集中讨论 useContext 钩子的使用，它能够简化 Context 的使用流程，使我们的代码更加简洁和易于维护。

理解useContext

useContext 是 React 提供的一个钩子，用于在函数组件中订阅 Context 的变化。通过 useContext，我们可以方便地获取 Context 中存储的数据，而不需要使用 Context.Consumer 组件。

基本用法

我们首先需要确保已经创建了一个 Context，这在上一篇中已经介绍过。假设我们有一个主题上下文 ThemeContext，其代码如下：

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

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

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

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

在上面的代码中，ThemeProvider 组件提供了一个包含 theme 和 toggleTheme 方法的 Context。

使用useContext消费Context

为了在子组件中使用上下文而不使用 Context.Consumer，我们可以直接使用 useContext，如下所示：

const ThemedComponent = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
      <p>当前主题: {theme}</p>
      <button onClick={toggleTheme}>切换主题</button>
    </div>
  );
};
复制

在该组件中，我们使用 useContext(ThemeContext) 获取上下文值。这样，我们就可以直接访问 theme 和 toggleTheme 方法了。这样做更为简洁，而不需要额外嵌套的 Consumer 组件。

将组件组合在一起

为了测试整个功能，我们需要将 ThemeProvider 和 ThemedComponent 组合在一起，形成我们的应用结构：

const App = () => {
  return (
    <ThemeProvider>
      <ThemedComponent />
    </ThemeProvider>
  );
};

export default App;
复制

代码分析

在上述代码中，ThemeProvider 组件向其子组件提供了主题上下文。 ThemedComponent 利用 useContext 钩子，从 ThemeContext 中获取当前主题和切换主题的函数。这样，使用 useContext 不仅让我们免去了一些冗余的代码，还提高了代码的可读性与可维护性。

注意事项

1. 避免重新渲染：虽然 useContext 的使用使得代码更加简洁，但要注意，当 Provider 的值发生变化时，所有使用这个上下文的组件都会重新渲染。这一点很重要，我们将在下一篇讨论性能优化时进行详细探讨。

2. 上下文值的变化：由于 useContext 使用的是最近一次提供的值，因此在上下文的 Provider 中必须谨慎处理其值的变化，避免不必要的更新。

小结

在本章中，我们学习了如何使用 useContext 来轻松访问 Context 中的数据。通过结合 ThemeContext 的实现示例，我们展示了 useContext 如何简化状态管理的工作。接下来，我们将探讨 Context 的性能优化，以确保在复杂组件树中高效使用上下文。

请继续关注下一篇内容！