第八部分：第六节 - 状态管理 (基础)：协调多个界面的状态

随着应用变得复杂，不同组件之间需要共享数据和状态是常见需求。例如，登录用户的信息、购物车的商品列表、应用的主题设置等，都可能需要在应用的多个地方访问和修改。

跨组件状态共享的挑战 (Props Drilling):

最直接的方式是通过 Props 将数据从一个父组件一层一层地传递给深层嵌套的子组件。这被称为 Props Drilling (属性钻孔)。当层级很深时，Props Drilling 会使得代码变得非常冗长和难以维护，很多中间层的组件仅仅是为了传递 Props 而存在。这就像餐厅里某个重要的通知（比如今日特价），需要从经理传给领班，领班传给服务员，服务员再传给顾客，即使领班和服务员自己并不需要知道特价的具体内容。

状态管理的概念：

状态管理就是一套用来更优雅地管理和共享应用状态的模式和工具。它的目标是让状态的变化可预测，并且方便地在应用中任何需要的地方访问和更新状态。

React 生态中有多种状态管理方案：

• React Context API: React 内置的解决方案，适合管理那些变化不频繁、或者不需要在整个应用范围内共享的状态（比如主题、当前认证用户等）。它解决了 Props Drilling 的问题。就像餐厅有一个公告板，服务员和顾客都可以直接去看今日特价。
• Redux, Zustand, MobX 等第三方库： 功能更强大、更复杂的状态管理库，适合管理大型应用中复杂、频繁变化的状态，并提供了更多的工具（如中间件、时间旅行调试）。就像餐厅引入了一套中央调度系统，管理所有订单、库存、员工排班等信息。

本节我们先学习 React 内置的 Context API，它是最基本的跨组件状态共享方式。

React Context API:

Context API 包含三个核心部分：

1. React.createContext(): 创建一个 Context 对象。

   // src/context/ThemeContext.js
   import React from 'react';// 创建一个 Context 对象，可以指定默认值 (可选)
   const ThemeContext = React.createContext('light'); // 默认主题为 'light'export default ThemeContext;
   

2. Context.Provider: 一个组件，它会提供 Context 的值给其子组件树。所有在该 Provider 下的子组件，无论嵌套多深，都可以访问到 Provider 提供的值。

   // src/App.jsx (作为 Provider)
   import React, { useState } from 'react';
   import ThemeContext from './context/ThemeContext'; // 导入 Context
   import Toolbar from './components/Toolbar'; // 导入使用 Context 的组件function App() {const [theme, setTheme] = useState('light');const toggleTheme = () => {setTheme(theme === 'light' ? 'dark' : 'light');};return (// 使用 ThemeContext.Provider 包裹需要访问 Context 的组件树<ThemeContext.Provider value={theme}> {/* 通过 value 属性传递 State */}<div className="App"><h1>应用主页</h1><button onClick={toggleTheme}>切换主题</button><Toolbar /> {/* Toolbar 及其子组件都可以访问 theme Context */}</div></ThemeContext.Provider>);
   }export default App;
   

3. Context.Consumer 或 useContext Hook: 用于在子组件中消费 (Consume) Context 的值。

   • Context.Consumer: 基于 Render Props 模式，代码稍显冗余，但在类组件中仍需使用。

     // src/components/ThemeButton.jsx (使用 Consumer - 旧方式或类组件)
     import React from 'react';
     import ThemeContext from '../context/ThemeContext';function ThemeButton() {return (// 使用 Consumer 包裹需要访问 Context 的部分<ThemeContext.Consumer>{/* Consumer 的子元素是一个函数，接收 Context 的值作为参数 */}{theme => <button className={`button-${theme}`}>主题按钮</button>}</ThemeContext.Consumer>);
     }export default ThemeButton;
     

   • useContext Hook: 功能组件中推荐使用的方式，更简洁直观。

     // src/components/ThemeButton.jsx (使用 useContext - 现代方式)
     import React, { useContext } from 'react'; // 导入 useContext Hook
     import ThemeContext from '../context/ThemeContext'; // 导入 Contextfunction ThemeButton() {// 使用 useContext Hook 获取 Context 的值const theme = useContext(ThemeContext);return (<button className={`button-${theme}`}>主题按钮</button>);
     }export default ThemeButton;
     

在 src/components/Toolbar.jsx 中使用 ThemeButton:

// src/components/Toolbar.jsx
import React from 'react';
import ThemeButton from './ThemeButton'; // 导入使用 Context 的 ThemeButtonfunction Toolbar() {return (<div><p>工具栏</p><ThemeButton /> {/* ThemeButton 会获取到 ThemeContext 的值 */}</div>);
}export default Toolbar;

通过 Context API，我们将 theme State 提升到 App 组件，然后通过 Provider 提供给整个子组件树。ThemeButton 组件无论在多深的层级下，都可以直接使用 useContext(ThemeContext) 获取到 theme 的值，而无需通过中间组件层层传递 Props。

小结： 当多个组件需要共享状态且 Props Drilling 变得复杂时，状态管理是解决方案。React Context API 是内置的状态管理工具，通过 createContext, Provider 和 useContext Hook (或 Consumer)，可以方便地在组件树中共享数据，避免 Props Drilling。它适合管理变化不频繁或全局性的状态。

练习：

1. 在你之前的 my-restaurant-app 项目中，创建一个 Context，用于共享当前登录用户的用户名 (例如，默认值为 ‘Guest’)。
2. 在 src/App.jsx 中，使用 useState 创建一个 State 变量 currentUser (初始为 ‘Guest’)。
3. 使用你的 User Context 的 Provider 包裹应用的主体部分，并将 currentUser State 作为 value 传递。
4. 创建一个新的组件 UserInfo.jsx。在 UserInfo 组件中使用 useContext Hook 获取当前用户的用户名。
5. 在 UserInfo 组件中显示“当前用户: [用户名]”。
6. 在 src/App.jsx 中添加一个按钮，点击时将 currentUser State 修改为另一个名字 (例如 ‘Admin’)，观察 UserInfo 组件的显示是否更新。