使用 Context API 与 Redux 有性能优势吗？

Posted 2023-02-22

【中文标题】使用 Context API 与 Redux 有性能优势吗？

【英文标题】：Is there a performance benefit on using Context API vs Redux?

【发布时间】：2020-01-10 10:55:53

【问题描述】：

我已经阅读了上下文 API，它看起来是一种解决 React 单向数据通信问题的优雅方法。

不过还有 Redux，它在共享全局状态方面做得很好。

如果我使用上下文 API 和钩子，我会获得任何性能优势吗？

PS：我读到使用上下文 API，我们将不得不检查渲染，因为它甚至有时会使整个应用程序重新渲染。

【问题讨论】：

***.com/questions/49568073/…的可能重复

我实际上关心的是性能，而不是差异或何时使用它。

Redux 在后台使用 Context 所以可能不会。

【参考方案1】：

Context API 最初是为大量读取、少量写入操作而设计的（例如在明暗之间更改主题）

您应该为 1、2 或 3 级深度数据使用 props

感谢投反对票，这是出处

来自reactjs.org:

上下文旨在共享可被视为 React 组件树“全局”的数据，例如当前经过身份验证的用户、主题或首选语言。

---

上下文主要用于当一些数据需要被不同嵌套级别的许多组件访问时。谨慎应用它，因为它使组件重用变得更加困难。

如果你只想避免通过多个级别传递一些道具，组件组合通常是比上下文更简单的解决方案。

【讨论】：

你引用的文字没有说明上下文是指“高读低写”

【参考方案2】：

使用 Redux，您可以使用 4 个辅助函数微调性能：areStatesEqualareOwnPropsEqualareStatePropsEqualareMergedPropsEqual 默认情况下，所有四个助手都有一些合理的默认功能，您可以从中受益。

使用钩子，您可以使用 React.memo 解释的 here 来提高性能，它显然不是默认选项，因此您需要明确使用它。

对于 Context API，我希望我可以说您可以使用 shouldComponentUpdate，但我可能不能，因为它属于过时的 React 类组件。

【参考方案3】：

Use-context 和 Use-reducer 来替换 redux 不是一个好习惯。上下文会导致页面重新加载，如果我们查看 react 开发工具提供的分析器，就会发现这一点，而 redux 不会这样做。 Redux 比 use-context 更适合全局状态管理

【讨论】：

感谢您的回答阿杰。您能否添加一些链接到解释您的答案的来源？或者添加相关的演示示例或屏幕截图？

但是 redux 提供者是基于 React Context 的。那么，您如何支持 Ajay 的这一论点？是否存在任何关于 redux 与 context + useReducer 的基准？