Приложение React.js, использующее много памяти (почти в два раза больше первоначальной реализации)

Недавно я поместил тяжелую страницу в React. Я сохранил html почти одинаковым. Основное различие заключается в том, что ранее сервер, обработанный html, был напрямую передан браузеру, и теперь реакция переписывает json через API-интерфейс на стороне сервера и использует React для управления DOM.

Я видел снимки кучи для более ранней версии до 55 МБ. Для тех же данных моментальный снимок кучи для реализации React.js приближается к 100+ МБ (почти вдвое)

Я понимаю, что данные json, хранящиеся в памяти, будут способствовать некоторому увеличению потребляемой памяти. Но когда я просмотрел моментальный снимок кучи, я вижу, что около 60% сохраненного размера связано с некоторыми объектами, у которого путь сохранения содержит deleteAllListeners > .... > unmountComponentAtNode. Я пытаюсь понять, что это означает с точки зрения сокращения используемой памяти.

Кроме того, могут ли атрибуты "data-reactid" , добавленные React в DOM, вносить вклад в неуклонное увеличение потребления памяти?

Этот вопрос содержит более подробную информацию, которая может помочь.

Ответы

Ответ 1

React использует то, что называется Virtual DOM. В основном он создает альтернативное дерево DOM в памяти, в дополнение к существующему дереву DOM браузера, но для выполнения эффективных обновлений он должен сохранять последнее отображаемое виртуальное дерево DOM в памяти, поэтому он может генерировать быстрые и эффективные обновления для дерева DOM браузера.

Из деталей второго вопроса я понимаю, что у вас бесконечный прокрутки, где вы в основном добавляете новые компоненты (без удаления новых), когда пользователь прокручивает страницу вниз. Таким образом, это должно стать источником увеличения использования памяти (поскольку теперь у вас есть данные + виртуальный dom в памяти по сравнению с предыдущим решением)

Как он исправляет это визуализация только тех компонентов, которые на самом деле видны пользователю, вы можете попытаться использовать react-list или для этого создайте свой собственный компонент.