#reactjs #performance #state
#reactjs #Производительность #состояние
Вопрос:
Может ли сохранение большого массива в состоянии компонента React вызвать утечку памяти или проблемы с производительностью? Я не выполняю рендеринг из того же, но мне нужно извлечь большой объем данных и обработать его перед рендерингом дочерних элементов. Поскольку одни и те же данные будут использоваться для представления результатов пользователю при событиях нажатия клавиш, и их необходимо извлекать по сети, я сохраняю их в состоянии (переход от пустого массива к заполненному).
Я говорю о вложенном массиве длиной около 1000, каждый из которых содержит вложенный массив длиной около 10.
Комментарии:
1. Я не уверен в части хранения вопроса, но по опыту я видел, что отображение большого количества строк, поступающих из
state, может привести к огромным проблемам с производительностью, вплоть до полного замораживания страницы примерно на 500 строк, поэтому убедитесь, что информация не отображается независимо.2. Да, я не рендерю кучу компонентов. Просто сохранение большого массива для предотвращения дальнейших сетевых вызовов.
3. Было бы неплохо сохранить ваши большие данные в состоянии компонента (или даже лучше сохранить их в useRef, чтобы избежать затрат на повторный рендеринг), но я предлагаю использовать отложенную загрузку для получения и обработки данных по частям. по частям. не забудьте установить ключ prop для каждой записи, чтобы избежать повторного отображения. и если у вас есть несколько дочерних элементов, используйте функцию memo.
4. Итак, я использую компонент класса для получения большого списка опций для react-select . Использование его в асинхронном режиме. При поиске пользователя я использую эти данные, которые я извлек, и отфильтровываю параметры. Я одновременно отображаю только 25 параметров, но мне нужно сохранить исходные данные для создания параметров. Поскольку это вложенный массив, я массирую его, используя свои пользовательские критерии поиска, прежде чем передавать параметры для отображения в react-select .
5. Должно быть хорошо, просто используйте
useRefилиuseMemo, чтобы предотвратить побочные эффекты производительности.