React.js 应用程序占用了大量内存（几乎是原始实现的两倍）

Posted 2023-03-07

【中文标题】React.js 应用程序占用了大量内存（几乎是原始实现的两倍）

【英文标题】：React.js app using up a lot of memory ( almost double the original implementation )

【发布时间】：2015-04-10 15:11:00

【问题描述】：

我最近将一个沉重的页面移植到 React。我保持 html 几乎相同。主要区别在于，之前服务器渲染的 html 是直接提供给浏览器的，而现在，react rewrite 通过服务器端 API 提取 json 并使用 React 来管理 DOM。

我看到早期实现的堆快照高达 55 MB。对于相同的数据，React.js 实现的堆快照约为 100+ MB（几乎翻倍）

我了解内存中保存的 json 数据会导致内存消耗的增加。但是，当我检查堆快照时，我发现大约 60% 的保留大小是由于某些对象的保留路径包含 deleteAllListeners > .... > unmountComponentAtNode 。我试图了解这对减少使用的内存意味着什么。

此外，React 添加到 DOM 的 “data-reactid” 属性是否会导致内存消耗的不可忽略的增加？

This question 提供了一些可能会有所帮助的详细信息。

【问题讨论】：

不清楚如何在没有更多细节的情况下尝试回答您的问题。 data-reactid 是不可忽略的，但我不希望它在典型页面中贡献大量。您可以看到here 如何使用deleteAllListeners。你有很多事件监听器吗？

***.com/questions/28435915/getinitialstate-cloneprops 是否会增加内存使用量，因为 state 是从 props 中克隆出来的（然后不再使用）？

克隆了多少数据？如果你用乘法来计算副本，结果是什么？

【参考方案1】：

React 使用了一种叫做 Virtual DOM 的东西。基本上它在内存中构建替代 DOM 树，除了现有的浏览器 DOM 树，但是为了执行有效的更新，它必须将最后显示的虚拟 DOM 树保留在内存中，因此它可以对浏览器 DOM 树生成快速有效的更新。

根据第二个问题的详细信息，我了解到您有无限滚动，当用户向下滚动页面时，您基本上会添加新组件（不删除新组件）。所以这应该是内存使用量增加的原因（因为现在你的内存中有数据+虚拟dom，与以前的解决方案相比）

解决方法是只渲染用户实际可见的组件，您可以尝试使用react-list，或为此实现自己的组件。