Что я должен делать, когда данные состояния становятся большими? - PullRequest
0 голосов
/ 27 апреля 2020

Вот что у меня есть:

state.groupTypes.list=[];

В списке будут элементы, когда я вызову API и сохраню его в дереве состояний state.groupTypes.list

//with paging and 10 item per page
getList(params)

I ' Я боюсь, что когда у state.groupType.list будет больше тысячи записей, он будет занимать всю память устройства, поэтому я нахожу решение: состояние должно сохранять максимум 100 записей. Таким образом, когда он перейдет на страницу 10, штат удалит первые 10 записей и pu sh новые получат из API. Есть ли какие-либо предложения по решению этой проблемы и возможно ли мое решение?

Ответы [ 2 ]

0 голосов
/ 27 апреля 2020

Размер содержимого объекта не имеет значения с точки зрения хранения его в состоянии. Объект не копируется, на него ссылаются.

Но если люди не управляются компонентом, то он не является частью состояния компонента, поэтому состояние не там, где оно должно быть , Компонент должен просто закрыть импорт этих данных или использовать контекст, представляющий эти данные, или получить их в подпорках, и т. Д. c.

Наличие больших данных в состоянии React прекрасно. На самом деле нет предела тому, что вы можете хранить там, и само состояние React не накладывает никаких ограничений на размер, который оно может хранить.

Проблема с большими наборами данных возникает при рендеринге таких данных. Например, если у вас есть таблица, которая должна отображать тысячи строк, это замедлит работу браузера. Мы говорим о тысячах записей, хотя сотни вообще не должны быть проблемой.

Если вам нужно отрендерить тысячи точек данных, вы можете использовать компоненты / библиотеки, которые помогают с этим, такие как React Virtualized, который будет отображать только необходимые элементы, а не все.

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

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

0 голосов
/ 27 апреля 2020

Вы должны создать API с поддержкой разбиения на страницы, предполагая, что вы хотите реализовать бесконечную прокрутку в своем приложении, вы отправляете запрос на сервер, например, "https://www.example.com/list/page1" и получаете ответ, что получите массив с 5 пунктами, и когда пользователь прокручивает список до конца, вы снова отправляете запрос на сервер "https://www.example.com/list/page2"

это все

...