React.js应用程序耗费了大量内存(几乎是原始实现的两倍)

Question

我最近向React移植了一个繁重的页面.我保持html几乎相同.主要区别在于,早先,服务器呈现的html直接提供给浏览器,现在,react rewrite通过服务器端API提取json并使用React来管理DOM.

我已经看到早期实现的堆快照最多可达55 MB.对于相同的数据,React.js实现的堆快照大约100多MB(几乎是两倍)

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

此外,React向DOM添加的"data-reactid"属性是否会导致内存消耗的不可忽略的增加？

这个问题有一些可能有用的细节.

Answer 1

React正在使用一种名为Virtual DOM的东西.除了现有的浏览器DOM树之外,它基本上在内存中构建备用DOM树,但是为了执行有效的更新,它必须将最后显示的Virtual DOM树保留在内存中,因此它可以生成对浏览器DOM树的快速有效的更新.

从第二个问题的细节,我知道你有一个无限滚动,当用户向下滚动页面时,你基本上添加新组件(不删除新组件).所以这应该是增加内存使用量的来源(因为现在你在内存中有数据+虚拟dom,与之前的解决方案相比)

修复它的方法是只渲染用户实际可见的组件,您可以尝试使用react-list,或为此实现自己的组件.