Владислав Калачев

Оптимизация React приложений

2 095

Всем доброго времени суто друзья. Если вы занимаетесь разработкой приложений на React то рано или поздно вы столкнетесь с проблемой медленной работы приложения из-за разрастания общей архитектуры и ее функционала. Если перед вами стала задача оптимизировать приложение то эта статья специально для вас.

С чего начать?

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

С версии React 15.4 появилась возможность профилировать компонент в инструментах разработчика Chrome  просто добавив в url параметр ?react_perf и зайдя во вкладку Performance( раньше Timeline ) можно легко проверить за какое время происходит обновление в компонентах. Есть возможность записать то или иное событие и проверить что больше всего ‘поджирает’ память с целью дальнейшей оптимизации нужного куска.

Правило ( скорость работы приложения на React )

Если реакция приложения больше 150 мск то работа приложения считается медленной.

Наша главная цель при оптимизации приложения сделать так что бы компонент не перерисовывался повторно если его ‘’пропсы» остались прежними.

Production сборка

Имея дело с JavaScript при чтение интерпретатором кода большую роль в скорости работы играет сама оптимизация кода для чего и были созданы такие инструменты как (gulp, grunt, webpack).

Что бы создать минимизированную и оптимизированную версию React приложения достаточно просто запустить npm run build и следовать инструкциям.

Настоятельно вам рекомендую показывать ваше конечное приложение в виде production версии.

shouldComponentUpdate и PureComponent

Для того что бы обновление компонента проходило только если props компонента изменились стоит использовать метод shouldComponentUpdate(). Модно всегда проверить изменились ли все приходящие props и если нет то остановить перерисовку компонента в VirtualDOM.  В React есть более удобные реализация данного метода которая зашита по умолчанию в PureComponent. При создание компонентов просто используйте в место  Component сам PureComponent.

Заключение

Сегодня мы познакомились с методами оптимизации приложений на React. Их должно хватить для начальной оптимизации. Есть еще несколько нюансов, но об этом я буду писать в других статьях. Данная статья является просто кратким введением в базовую оптимизацию приложений написанных на React. Надеюсь что данная информация была вам полезна. Приятно покодить)

Комментарии:

Оптимизация React приложений: 1 комментарий

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *