我目前正在探索优化需要高可扩展性和性能的企业级应用程序的数据存储和检索的策略。为了提高效率,我考虑利用 React 的功能,例如
memoization
、PureComponent
和 React.memo
。
我正在考虑的一种方法是将应用程序数据存储在 DOM 元素中并通过引用访问它。这是展示我的方法的片段:
<div
ref={myRef}
data-my-data={myData}
>
<MyReactComponents />
</div>
我很想知道这种方法是否符合在 React 应用程序中实现性能、可维护性和可扩展性的最佳实践。具体来说,我正在寻求以下方面的见解:
经验丰富的 React 开发人员提供的任何指导或建议将不胜感激。谢谢!
如上所示将数据存储在 DOM 元素中会提高效率吗?
我看不出这有什么帮助。如果您有渲染所需的数据,则必须以某种方式将其放入状态。那是因为状态是 React 知道它存在的唯一方式。对于不需要数据进行渲染的罕见情况,您可以将其放在您喜欢的任何地方(包括 data-
属性),但这也不太可能影响性能。
如果应用程序的所有部分都需要状态变量(全局状态),那么标准的反应方法是将其提升到组件树的顶部并将其向下传递。如果您通过 props 传递它,这可能会强制整个组件树重新渲染。因此,通常最好通过上下文传递它,并将一个记忆组件放在上下文提供程序的正下方,这可以阻止大部分组件树的渲染。
全局状态管理器库可以是另一个工具,因为它们通常是为了在底层充分利用状态而编写的。例如,在 redux 中,
useSelector
钩子用于订阅商店。如果商店的相关部分发生变化,它将在称为
useSelector
的特定组件中设置状态,因此状态尽可能接近其使用位置。因此,只有该组件及其后代必须重新渲染。最后一个提示:如果您在页面上放置了很多内容,但其中大部分都在屏幕外,请考虑创建一个虚拟化列表,例如使用 react-window