React 中针对高性能企业应用程序的高效数据存储和检索策略

Question

我目前正在探索优化需要高可扩展性和性能的企业级应用程序的数据存储和检索的策略。为了提高效率，我考虑利用 React 的功能，例如

memoization

、

PureComponent

和

React.memo

。

我正在考虑的一种方法是将应用程序数据存储在 DOM 元素中并通过引用访问它。这是展示我的方法的片段：

<div
  ref={myRef}
  data-my-data={myData}
>
  <MyReactComponents />
</div>

我很想知道这种方法是否符合在 React 应用程序中实现性能、可维护性和可扩展性的最佳实践。具体来说，我正在寻求以下方面的见解：

经验丰富的 React 开发人员提供的任何指导或建议将不胜感激。谢谢！

Answer 1

如上所示将数据存储在 DOM 元素中会提高效率吗？

我看不出这有什么帮助。如果您有渲染所需的数据，则必须以某种方式将其放入状态。那是因为状态是 React 知道它存在的唯一方式。对于不需要数据进行渲染的罕见情况，您可以将其放在您喜欢的任何地方（包括 data- 属性），但这也不太可能影响性能。

大多数 React 性能问题都归结为渲染次数超出需要，或者元素超出需要。就一般技巧而言，我建议您保持组件较小，并将状态保持在靠近它们使用的位置。结合您提到的记忆工具，这些可以最大限度地减少状态更改时需要重新渲染的元素数量。

如果应用程序的所有部分都需要状态变量（全局状态），那么标准的反应方法是将其提升到组件树的顶部并将其向下传递。如果您通过 props 传递它，这可能会强制整个组件树重新渲染。因此，通常最好通过上下文传递它，并将一个记忆组件放在上下文提供程序的正下方，这可以阻止大部分组件树的渲染。

全局状态管理器库可以是另一个工具，因为它们通常是为了在底层充分利用状态而编写的。例如，在 redux 中，

useSelector

钩子用于订阅商店。如果商店的相关部分发生变化，它将在称为

useSelector

的特定组件中设置状态，因此状态尽可能接近其使用位置。因此，只有该组件及其后代必须重新渲染。

最后一个提示：如果您在页面上放置了很多内容，但其中大部分都在屏幕外，请考虑创建一个虚拟化列表，例如使用

react-window

。如果您显示一个大列表，这可以显着提高性能。