React项目中Context API与Redux区别

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

如果使用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 的学习曲线更陡峭，更容易学习。