#javascript #reactjs #progressive-web-apps
#javascript #reactjs #progressive-веб-приложения
Вопрос:
Я думаю, что я столкнулся со своей архитектурой приложения в React и действительно нуждаюсь в помощи.
Я создал первое автономное приложение, которое при первом запуске извлекает все данные с сервера, сохраняет их локально в индексированной базе данных, а затем загружает их в состояние React. Таким образом, он работает и без подключения к Интернету.
Когда пользователь создает данные, они сначала сохраняются локально, а затем синхронизируются с сервером. Обновления извлекают только новые данные.
Пока это работает, но когда я начал работать с сотнями записей, у меня возникли проблемы с производительностью. Поскольку я работаю с хранилищем браузера, а не с сервером при выполнении запросов, я всегда работаю со всеми данными в индексированной БД и не могу использовать магию разбивки на страницы для получения только необходимых данных.
Например, у меня есть 3000 документов, каждый из которых принадлежит примерно 30 папкам. При загрузке мне нужно связать их с папками, отсортировать их, а затем отфильтровать по папкам. Возможно, добавьте еще несколько циклов для вычислений для чего-то вроде вложенных документов и т. Д. И т. Д.
Очевидно, что это плохо масштабируется, так как мне нужно много раз перебирать массив документов, чтобы получить желаемый результат.
Я думаю, что у меня есть только три варианта, но хотелось бы услышать, что бы вы предложили:
- Оптимизируйте циклы и попытайтесь сократить некоторые из них (это просто увеличит проблему производительности, но не решит ее)
- Отключите автономные возможности все вместе, кэшируйте только несколько элементов или один «просмотр» (последние открытые документы, последний фильтр и т. Д.) И получите все остальные элементы с сервера. С меньшим количеством данных вычисления будут намного быстрее на стороне клиента.
- Кэшируйте отфильтрованный результат со всеми вычислениями и сортировкой. Поскольку приложение загружено созданием / обновлением контента, это лишь немного помогает, поскольку эти вычисления скоро устареют и их еще нужно переделать. Это может помочь со временем запуска приложения, но не с производительностью потока из-за постоянных пересчетов данных.
- бонус — я мог бы разделить массив с данными на более мелкие части, прежде чем использовать их в состоянии React для дальнейших вычислений и сортировки, но мне все равно нужно было бы предварительно выбрать их с помощью цикла
Спасибо