如果有人问我，“网站上最重要的部分是什么？”我的回答总是相同的：状态管理。毕竟，状态决定了用户会看到什么。
有效的状态管理是构建鲁棒网络应用程序的关键方面。在 React 中，全局状态管理的两个最受欢迎的选项是 Context API 和 Redux。
对于选择 React 全局状态管理解决方案，开发人员有很多选项要考虑。长期以来，Redux 一直是开发者们的热门选择。然而，随着 Context API 的推出，开发人员开始迅速采用它。在某些情况下，他们甚至用 Context 替换了 Redux。所有这些都引发了一个重要的问题：我应该使用哪个？
在选择使用 Context API 还是 Redux 时
如果你仅仅是为了避免传递 props 而使用 Redux，可以改用 Context API。Context API 适合在组件之间共享小型数据。另一方面，Redux 更为强大，具有 Context API 没有的有用功能。它非常适合管理大块数据和处理对 API 的请求。
Context API 和 Redux 的区别
Context API 和 Redux 的区别在于它们如何处理状态更改。Redux 采用集中式方法，状态更改在中央存储中管理。另一方面，Context API 在组件级别处理状态更改，因为它们发生在每个组件内部。
为了更好地理解这两个库之间的区别，让我们分别深入研究它们。
Context API
Context 提供了一种在组件树中传递数据的方式，而无需在每个级别手动传递 Props。（来源: React）
Context API 是 React 世界中令人兴奋的新功能。它提供了一种方便的方法，可以在多个组件之间共享数据，而无需在每个级别手动传递 Props。当您需要在 React 组件树中全局访问数据时，这个功能特别有帮助，如主题偏好或首选语言。
Context API 的主要优点之一是简化应用程序中的状态管理。通过使用 Context，您可以减少在组件之间传递数据的复杂性，并消除进一步操作或 props 的需要。这可以使您的代码更简明，更易于维护。就像拥有一个方便的工具，可以简化组件之间数据共享。
Context API 有两个核心概念：
- 提供者（Providers）
- 消费者（Consumers）
Providers 是用于定义和跟踪特定状态块的。然后，所有嵌套在 Provider 中的子组件都可以访问这些状态块。这些子组件称为消费者，负责访问或修改 Context 提供的状态。
总的来说，Context API 提供了一种有效的方式来管理 React 应用程序中共享的数据，这使它成为手动传递 prop 或使用其他状态管理库（如 Redux）的有价值的替代方案。
Redux
JavaScript 应用程序的可预测状态容器（来源: Redux）
Redux 是一个强大的 JavaScript 库，提供了一种中心化方法来管理应用程序中的数据流。它旨在帮助您构建一致，可测试和多功能的应用程序，可以在不同的环境中运行。Redux 提供了一些出色的功能，如撤消/重做功能、状态持久性等等。
使用 Redux，您的应用程序的整个状态都存储在一个地方，可以轻松地访问任何组件，无需在组件之间传递 props。它基于三个核心概念运作：
*动作（Actions） *减速器（Reducers） *商店（Store）
Actions 表示向 Redux 商店发送数据的事件。它们可以由用户交互触发，也可以直接由应用程序调用。每个操作都有一个唯一的类型和与之关联的有效负载。例如，添加任务的操作可能是这样的：
const addTask = text => { return { type: 'tasks/taskAdded', payload: text }}
当一个操作被分派时，它触发相应的减速器函数。减速器接收当前状态，并根据接收到的操作返回反映更改的新状态。
所有这些都发生在商店内部。商店负责保持应用程序状态。在 Redux 中，建议为整个应用程序只使用一个 store。
现在我们了解了 Redux 和 Context，让我们探索它们各自闪耀的不同用例和应用程序。
Context API 的用例
注：你可以查看官方文档，他们推荐了一些用例链接 - Context_API
Context API 是 React 中自带的一个强大功能，提供了一种简单的方式，可以在组件之间共享数据，无需手动传递 prop。它非常适合管理应用程序中相对简单、全局的轻量级数据。
让我们看一个使用 Context API 管理 React 应用程序主题的示例：
import React, {useContext, useState} from "react";// Setting default theme valuesconst ThemeContext = React.createContext({ theme: "light", setTheme: () => {},});const App = () => { const [theme, setTheme] = useState("light"); return ( <ThemeContext.Provider value={{ theme, setTheme }}> <Hello /> </ThemeContext.Provider> );};const Hello = () => { const { theme } = useContext(ThemeContext); return ( <h1 style={{ color: theme === "light" ? "black" : "white" }}>Hello</h1> );};
在此示例中，我们使用 React.createContext() 创建了一个 ThemeContext，并将初始主题值设置为 light，以及 setTheme 函数。App 组件使用 ThemeContext.Provider 包裹 Hello 组件，使 theme 和 setTheme 值可用于所有嵌套组件。Hello 组件使用 useContext 消费 theme 值，并根据所选的主题应用适当的颜色。
Redux 的用例
Redux 通常用于以下情况：
- 应用程序具有需要多个组件访问的大量状态。
- 应用程序状态经常更新。
- 更新应用程序状态的逻辑很复杂。
为了更好地了解 Redux 的理想用例，让我们实现一个跟踪应用程序用户列表的状态块。
在 userReducer.js 文件中，我们从空数组开始：
const initialState = [];const userReducer = (state = initialState, action) => { switch (action.type) { case "SET_USERS": return action.payload; case "ADD_USER": return [...state, action.payload]; case "EDIT_USER": const newState = [...state]; const index = newState.findIndex((item) => item.id === action.payload.id); newState[index] = action.payload; return newState; case "DELETE_USER": return state.filter((user) => user.id !== action.payload.id); default: return state; }};
要初始化 Redux，我们需要在 Redux Provider 中包装整个 app 组件并初始化 store。
在 App.jsx 文件中：
import { Provider } from 'react-redux';import { createStore } from 'redux';import userReducer from './reducers/userReducer';// create an instance of the storeconst store = createStore({ users: userReducer,});const App = () => { // set the store instance return <Provider store={store}><Users /></Provider>;};export default App;
最后，我们可以使用 react-redux 提供的 useSelector hook 将组件连接到状态，以访问状态：
import { useSelector } from 'react-redux';const Users = () => { const users = useSelector((state) => state.users); return ( <ul> {users.map((user) => ( <li key={user.id}>{user.name}</li> ))} </ul> );};export default Users;
其他状态管理工具
在本文中，我们将讨论一些其他可能会引起您兴趣的状态管理工具。重要的是要注意，我们并不试图说服您使用这些工具，或认为它们比 Redux 或 Context API 更出色。我们只是想提高意识并为您提供更多的选择。因此，让我们深入探索这些工具！🕺🏻
React-Query
值得一提的工具之一是 React Query。它专门设计用于处理与数据获取相关的状态管理。使用 React Query，您将获得一系列有用的实用程序，使数据获取变得轻而易举。如果您想了解更多关于 React Query 的信息，可以查看它们的文档-> React-Query
Recoil
另一个有趣的状态管理工具是 Recoil，它由 Facebook 开发。尽管它相对较新，但 Recoil 正在积极开发和改进。在 Recoil 中，每个状态块称为“原子”，您可以将这些原子与选择器组合，以创建适合您应用程序的独特数据结构。如果 Recoil 引起了您的兴趣，您可以在此处找到更多信息 -> Recoil。
MobX
现在，让我们谈谈 MobX。与 Redux 和 Context API 不同，MobX 采用基于类的方法。它的核心概念围绕着使状态管理“可观察”。通过利用 MobX，您可以轻松地观察和响应应用程序状态中的变化。如果您想深入了解 MobX，可以阅读更多有关它的信息 -> MobX。
总结
状态管理是 Web 应用程序的重要方面，选择适当的方法来管理 React 应用程序中的全局状态至关重要。通常争论的问题通常是何时使用 Context API 和 Redux。了解如何使用 Context API 和 Redux 很重要，选择适当的工具同样重要。
在本文中，我们提供了 Context API 和 Redux 的基本示例，以及它们的理想用例。最终，我们回答了何时使用 Context API 和何时使用 Redux 的问题。掌握了这些知识，您可以自信地决定何时使用 Context API 或 Redux。👍
