Как оптимизировать приложение на React/redux?

Question

[cester]

Добрый день! Посоветуйте пожалуйста как оптимизировать приложение на React/redux?
На что обратить внимание при написании actions, reducers, возможно это замедляет работу?!
Влияет ли на это конфиг вебпака?

Суть приложения ...
Сначала загружается аяксом массив объектов (пока SSR нет), примерно 2000 объектов.
Когда эти объекты начинают выводиться (на карте и в сайдбаре) как-то немного начинает тупить.
Особенно сайдбар, карту кластеризию, там еще более-менее.
Кроме этого есть еще сокет сервер который каждые три секнды посылает данные, и вот когда данные начинают мерджится страница вообще умирает.
Вопрос, выводить только то, что нужно?
Как улучшить работу приложения?
Буду благодарен за любые советы.
Спасибо!

Comments

[Антон Мудренок]

Если вы хотите за 100мс добавить 1000 объектов в дом — в любом случае будет глюкан, чтобы вы не делали.

Answer 1

[Mikhail Osher]

Много объектов в DOM дереве - зло. https://bvaughn.github.io/react-virtualized/ в помощь.

Redux.
Если есть computed selectors - оберните их в https://github.com/reactjs/reselect/
Убедитесь, что у Вас правильная "форма" (shape) стора. Продумайте, в каких структурах лучше хранить данные, чтобы их было проще обновлять/получать.

Если есть узкое место в множестве преобразований данных: задумайтесь о таких мелочах, вроде создания новых функций-коллбэков, на это тоже ресурсы расходуются - возможно надо применить что-нибудь из functional programming (lodash-fp, ramda, most).

Не переборщите с магией. Старайтесь писать приложение так, чтобы код был максимально близок к текущему стандарту в браузере. Для этого тюнингуем babel-preset-env, с указанием нужных targets.browsers, и смотрим на caniuse/mdn какие фичи из стандартов используете и какие поддерживаются текущими браузерами.

Не могу найти твит одного из разработчиков React. TL;DR - React не является серебрянной пулей для решения задачи огромной перерисовки.
Так же, почитайте: https://jakearchibald.com/2017/netflix-and-react/

Answer 2

[Леонид Данилов]

1. Выключить все логи в консоль -- это синхронная, блокирующая браузер, операция.
2. Проверить код через ESLint, он дает много подсказок по написанию не только красивого, но и правильного кода.
3. Использовать старые реализации каких-либо операций, например Array.slice() вместо ...spread-оператора
4. Проверить презентационные компоненты, чтобы они обновлялись только в случае, если им РЕАЛЬНО нужно обновить отображаемые данные

Answer 3

[davidnum95]

В доке есть даже отдельная статья на эту тему.