@SuperOleg39ru
Front-end разработчик

Узкие места производительности React + Redux приложения?

Добрый день!

Столкнулся с лагами при разработке приложения на React и Redux.

Кейс:
50 - 100 полей ввода, каждое с уникальных reducer в хранилище.
Поле ввода - один connected компонент, оборачивает presentational компонент.
При непрерывном вводе символов в поле идет заметная задержка ввода (на каждый символ 2 action).

Для теста изменил connected компонент, теперь вместо привязки к store он хранит и изменяет значение через state.

Скорость заметно увеличилась, но подлагивания остаются!

Дебажил производительность при разных условиях, в devtools и React Perf, все сводится к тому, что React свое дело делает быстро.
В среднем, без подключения компонентов к store, общем картинка такая (10x slowdown для наглядности):
Event (keypress) длится больше чем в 5 раз, чем рендеринг компонента.

b60a4b5018e14b2ebe6a8ff2ab27a74c.JPG

Основной вопрос - как получается, что React рендерит быстро, а приложение лагает?
Интересует любое предположение, что может быть не так.
  • Вопрос задан
  • 509 просмотров
Пригласить эксперта
Ответы на вопрос 1
1. Производительность тестить нужно только в прод билде. (Гуглить react production build)
2. Чаще всего bottleneck в redux приложениях - это shouldComponentUpdate и нерациональное использование пропсов. (Тут читать доки про scu, reselect, и pureComponent)
3. Store должен быть максимально плоским, т.е. содержать минимальную вложенность (вытекает из п.2)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы