想象一个带有购物清单整理器的厨房：

• 如果使用Context API：可以将其视为厨房中的常见白板，其中显示购物清单，任何人都可以看到并更改它。如果购物清单管理器是
• 如果使用Redux实现列表管理器：可以被视为高级版本，厨房中的所有人员不仅可以看到该列表，而且列表中的每个更新都可以追溯到进行更改的人。

因此，GraphQL可以被视为一个列表组织者，用于跟踪每个操作，而 Context API 用于更简单的任务。

什么是 Redux？

• Redux是一个开源 JavaScript 库，用于管理和集中应用程序状态。现代 Web 应用程序被表示为一个复杂的组件树，这些组件生成和共享称为状态的数据。 
•  Redux 是一种模式和库，可帮助开发人员大规模实现复杂的状态需求。它是由 Facebook 的 Dan Abramov 和 Andrew Clark 于 2015 年开发的。
• Redux 使用Typescript编写，具有跨平台兼容性。

首先，安装一个 React 应用程序：

1.安装Redux工具包。
npm install @reduxjs/toolkit react-redux

2.创建slice

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

const initialState: State = {
  toppings: [‘corn’]
};

const pizzaSlice = createSlice({
  name: 'pizza',
  initialState,
  reducers: {
    addTopping: (state, action) => {
      state.toppings = [...state.toppings, action.toppings];
    },

}
});

export const { addTopping } = pizzaSlice.actions;
export default pizzaSlice.reducer;

3、用Sclie创建Redux Store

import { configureStore } from '@reduxjs/toolkit';
import pizzaReducer from './pizzaSlice';
const store = configureStore({
  reducer: {
    pizza: pizzaReducer
  }
});
export default store;

4、为react 组件创建一个 Store，并用 Redux 库中的 Provider 对这个组件进行包装。

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Pizza from './Pizza';
const App = () => {
  return (
    <Provider store={store}>
      <Pizza />
    </Provider>
  );
}
export default App;

Redux组件
Redux 有三个主要组件：Store、Actions 和 Reducers。

• Store  - 存储是一个 Javascript 对象，用于保存应用程序的状态。
• Actions - Actions 是定义状态变化并向 Redux 存储器发送数据的事件。
• Reducers - Reducers 是纯函数，用于接收状态和动作输入，并将状态作为输出返回。

Redux特点

• 单一真实源 - 应用程序的全局状态存储在对象树中的单一存储空间中。这一特性使调试变得更容易，并有助于在开发过程中保持应用程序的状态。
• 状态只读--只有通过发出动作才能更改状态，该动作是一个普通的 Javascript 对象，描述了所发生的事情。这种集中式更改链可避免出现竞赛条件问题。
• 使用纯函数进行更改--要指定状态树如何通过动作进行转换，需要编写纯还原器，它只是一个纯函数，用于获取之前的状态和动作，并返回一个新状态。

Redux局限性

• 模板代码--设置存储、操作和还原器需要大量模板代码，这可能会耗费初学者的时间。
• 性能开销 - 由于每次更新都需要复制状态，Redux 应用程序的性能会随着数据量的增大而降低。
• 复杂性--由于 Redux 的学习曲线对初学者来说比较困难，因此 Redux 与 React 的复杂性会增加。

使用案例
在以下情况下，Redux 是一个合适的选择

• 您的应用程序有许多状态，这些状态会被许多组件访问。
• 状态管理要求复杂，需要采用集中式方法。
• 应用程序状态更新频繁。
• 应用程序状态背后的逻辑复杂。

什么是Context API?
通过 React Context API，React 应用程序可以有效地生成可以传递的全局变量。它是 React 提供的一种状态管理解决方案。使用它，我们可以创建所谓的上下文，上下文提供状态和函数等值。它可以被包裹在上下文周围的一组组件所使用。

1. 创建一个Context.

import { createContext } from 'react';

export const AppContext = createContext(“”);

2. 为Context创建一个Provider(提供者是制造上下文的) 。

import { useState, React } from "react";
import { AppContext } from "./AppContext";
import AppComponent from "./AppComponent";
function App() {
  const [text, setText] = useState("");
  return (
    <div>
      <AppContext.Provider value={{ text, setText }}>
        <AppComponent />
      </AppContext.Provider>
    </div>
  );
}
export default App;

3、在 React 组件中使用Context 

import { useContext } from 'react';
import { AppContext } from './AppContext';
function AppComponent() {
  const { text, setText } = useContext(AppContext);
  return (
    <div>
      <h1>{text}</h1>
      <button onClick={() => setText('Geeks for Geeks')}>
        Click me
      </button>
    </div>
  );
}
export default AppComponent;

Context API的组件
React Context 有两个主要组件：提供者（Provider）和消费者（Consumer）。

• Provider - Provider 用于定义和跟踪特定的状态片段。该组件负责提供跨组件共享的数据。上下文的上文
• Consumer - 消费者负责修改Provider提供的状态。上下文的下文

Context API 的优点

• 数据共享– 轻松数据共享是 Context API 的主要优势之一。您可以轻松地跨组件共享数据，而不必通过组件树的每个级别传递数据。因此，可以维持全局数据流，同时减少错误。
• Prop Drilling 的替代方案–当组件需要访问组件树中多个级别的数据时，就会发生Prop Drilling 。对于大型组件树，此方法变得困难且难以管理。因此，React Context API 提供了一种直接跨组件传递数据的机制，而不需要传递 props。
• 减少耦合——通过为支柱钻井提供替代方案，数据可以在各个组件之间传递，从而减少组件之间的耦合和依赖性，从而使应用程序更加高效。
• 集中化——使用全局状态流，可以集中存储数据，并且可以更有效地更新这些数据。

Context API 的局限性

• 性能低——对于大型组件树，Context值的不断更新可能会导致不必要的重新渲染并降低应用程序的性能。
• 测试——与基于 props 的状态管理的组件相比，上下文组件的测试更加困难。在测试期间提供正确的上下文值是一项艰巨的任务，并且需要额外的初始设置。
• 无类型安全– 上下文值未进行类型检查，因此编译器无法检测到错误的值，并可能导致运行时错误。

用例
在以下情况下，Context API 是一个合适的选择：

• 您希望在应用程序的不同组件之间共享数据或状态，并且需要一种集中的方式来访问和管理数据。
• 您的应用程序具有嵌套组件。在这种类型的应用程序中，您可以使用 Context API 避免道具钻探。
• 您的应用程序的状态需要动态更改或更新。
• 应用程序中需要通信的组件与组件树无关。

两者区别：

• Redux 使用集中式存储，其中actions 操作和reducer修改状态。
• Context API 使用分散式方法，其中状态使用提供者和使用者通过组件树传递。

性能区别：

• Redux ：大型应用程序的高性能。
• Context API ：使用简单，仅限于小规模应用。

使用区别：

• Redux 需要事先设置才能与 React 应用程序有效集成。
• Context API 需要最少的设置

• Redux 借助有效的 Redux 开发工具，调试变得更加容易。
• Context API 在嵌套组件树的情况下调试很困难。

结论
总之，在本文中，我们了解了 Redux 和 Context API 是什么、它们的组件、优点、限制和用例。两者对比可以看出，Redux适合有经验的专业人士使用，更适合大型应用，性能更好。另一方面，Context API可供初学者使用，更适合中小型应用程序，以获得更好的性能。两者之间的主要区别在于状态管理的方法。Redux 采用集中式方式，以 store、actions 和 Producer 为组件，而Context API 采用去中心化方式，以提供者和消费者为组件。

常见问题解答
Context API 可以代替 Redux 吗？

• 对于更简单的应用程序，React Context 足以维护应用程序，但对于更大的应用程序，Redux 就变得必要了。

Context 和 Redux 可以在应用程序中一起使用吗？

• 是的，React Context 和 Redux 可以在单个应用程序中一起使用，其中一些部分由 Redux 维护，一些部分由 React Context 维护。

Redux 和 React Context 的学习曲线有什么区别？

• 与 React Context 相比，Redux 的学习曲线更陡峭，更容易学习。