Redux 和 React 上下文结合在一起

Question

• 我正在构建一个 Web 应用程序，其中配置了 redux 并且应用程序相当大。
• 现在我想存储一些用户首选项，这些首选项将作为 API respopse 的一部分提供。

由于大多数组件都需要这些数据，因此我计划将数据存储在上下文中并使用上下文包装应用程序。

我对方法有几个问题。

• 考虑上下文会影响性能吗？
• 由于 Redux 已配置为内部使用 Context。那么我们是否应该继续使用 redux 来处理用户数据呢？
• 一起使用 Redux 和 Context 是一个好习惯吗？

Answer 1

Context 和 Redux 是非常不同的工具，它们解决不同的问题，但也有一些重叠。

上下文不是“状态管理”工具。它是一种依赖注入机制，其唯一目的是使 React 组件的嵌套树可以访问单个值。由您决定该价值是什么以及如何创建它。通常，这是使用 React 组件状态的数据（即 useState 和 useReducer）来完成的。所以，你实际上是在自己做所有的“状态管理”——上下文只是为你提供了一种将其传递到树上的方法。

Redux 是一个库和一种模式，用于将状态更新逻辑与应用程序的其余部分分开，并可以轻松跟踪状态何时/何地/为何/如何更改。它还使您的整个应用程序能够访问任何组件中的任何状态。

此外，Context 和 (React-)Redux 传递更新的方式也存在一些明显的差异。上下文有一些主要的性能限制 - 特别是，任何使用上下文的组件都将被迫重新渲染，即使它只关心部分上下文值。

所以，是的，您可以在同一个应用程序中使用它们，就像您可以在同一个建筑工作中同时使用锤子和螺丝刀一样。

更详细的可以看我的帖子：

• 为什么 React Context 不是“状态管理”工具（以及为什么它不取代 Redux）
• React、Redux 和上下文行为
• React 渲染行为（大部分）完整指南