Что я должен предпочесть при хранении огромного количества данных в приложении React?

Question

Я работаю над продуктом, в котором я использую ReactJS для внешнего интерфейса.Я получаю огромное количество данных (в тысячах) в виде списка ответов API, которые я хочу хранить локально.Так что я должен предпочесть в этом сценарии: LocalStorage или Redux?

Я запутался, так как объем данных очень велик, и я думаю, что хранение его на redux-store может привести к некоторой проблеме с производительностью.

Answer 1

Лично я не нахожу тысячи элементов в списке, это вызовет много проблем с производительностью магазина Redux.Вместо этого, при использовании redux для хранения большого списка, примите во внимание следующие проблемы:

1. Вам действительно нужно много данных за один раз?Отображение общего списка, такого как список нумерации страниц или бесконечная прокрутка, каждый раз принимает только часть данных.Если вам не нужно отображать DOM для всех данных в списке одновременно, рассмотрите возможность разбивки на страницы данных в бэкэнде и отправьте во внешний интерфейс точное количество данных в списке для отображения.

2. Как вы храните свой список? Redux рекомендует нормализацию данных , чтобы повысить производительность.Массив - это последняя структура, в которой вы хотите сохранить свой список, если приложение часто запрашивает и отображает список.

3. Как вы вынимаете свой список из избыточного хранилища для рендеринга DOM?Это очень важно, если вам нужно часто обновлять элементы в списке. Вот отличное решение , которое разбивает то, что вы можете сделать, чтобы справиться с этим делом.

Answer 2

Localstorage (обычно) ограничен 5 МБ или меньше дискового пространства, поэтому, если вы храните данные, которые сериализуются до> 5 МБ, тогда localalstorage не вариант.

Как правило,ваша производительность пострадает при попытке перебрать данные или изменить DOM на их основе.Вообще, я думаю, что вы ищете ответ на неправильный вопрос.

Вместо этого подумайте, как лучше всего отобразить большие объемы данных для пользователя?

Если ответом на это является разбиение на страницы, то вы решили свою проблему с данными, как выможно загрузить звонки за просмотр.То же самое с бесконечной прокруткой.Если вам нужно оптимизировать нагрузку на сервер, вы можете добавить слой кэширования серверной части и т. Д.