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

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

我已经看到早期实现的堆快照的速度提高到了55mbs。对于相同的数据，React.js实现的堆快照大约为100+MBs（几乎是原来的两倍）

我知道存储在内存中的json数据会增加内存消耗。但是，当我检查堆快照时，我发现大约60%的保留大小是由于某些对象的保留路径包含deleteAllListeners>…>在节点上卸载组件。我试图理解这对于减少内存使用意味着什么

另外，React添加到DOM的“datareactid”属性是否会导致内存消耗的不可忽略的增加

---

提供了一些可能有用的详细信息。

React正在使用一种称为虚拟DOM的东西。基本上，除了现有的浏览器DOM树之外，它还可以在内存中构建替代的DOM树，但要执行高效的更新，它必须将最后显示的虚拟DOM树保留在内存中，以便能够快速高效地更新浏览器DOM树

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

---

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

不知道如何回答您的问题而不提供更多详细信息

DataReactID

是不可忽略的，但我不希望它在一个典型的页面中贡献很大。您可以看到如何使用

deleteAllListeners

。您是否有很多事件侦听器？可能会导致内存使用量的增加，因为状态是从props克隆的（以后再也不用了）？克隆了多少数据？如果你用乘法来计算拷贝数，结果是什么？