不再需要 Redux：让全局数据更简单

前端

2023-11-12 03:23:22

Redux 的困境

Redux 曾经是管理前端应用程序状态的流行选择。然而，随着时间的推移，它开始显示出一些缺点：

冗长的代码库： Redux 需要大量样板代码，这会增加代码库的复杂性和维护成本。
难以理解： Redux 的概念可能对初学者来说很难理解，尤其是当涉及到嵌套状态和异步操作时。
性能瓶颈： 随着应用程序的增长，Redux 可能会成为性能瓶颈，因为它必须更新整个存储以进行更改。

更简单的替代方案

为了解决 Redux 的问题，我探索了替代方案，发现了一种更简单、更有效的方法来管理全局数据：

利用组件上下文

组件上下文提供了一种简单的方法来在组件层次结构中共享数据。通过使用 useContext 钩子，你可以访问组件树中任何级别的上下文值。这可以避免在多个组件之间传递道具的需要，从而简化了代码库。

优点：

简单易懂： 组件上下文非常简单，易于理解和使用。
高性能： 它不会更新整个存储，因此不会对性能造成瓶颈。
模块化： 你可以轻松地将应用程序划分为独立的模块，每个模块都有自己的上下文。

实施

要使用组件上下文管理全局数据，请按照以下步骤操作：

创建一个上下文提供者组件来提供共享数据。
在需要访问数据的组件中使用 useContext 钩子。
使用 useReducer 或 useState 钩子来管理组件的状态。

代码示例

import React, { createContext, useContext, useReducer } from "react";

const MyContext = createContext();

const MyProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return <MyContext.Provider value={{ state, dispatch }}>{children}</MyContext.Provider>;
};

const MyComponent = () => {
  const { state, dispatch } = useContext(MyContext);
  return <div>{state.count}</div>;
};