Как повысить производительность реагирующего приложения, когда в React много компонентов?

Question

Понятно, что улучшение производительности приложения - это зависит. Тем не менее, я думаю, что есть некоторые случаи, когда вы можете улучшить свое приложение. В моем случае я заменил мои аналогичные компоненты на HOC. Любые другие предложения?

Answer 1

Использовать React.PureComponent. Это предотвращает ненужный повторный рендеринг, но будьте осторожны, у PureComponent есть потенциальные ловушки .

Answer 2

Если вы разрабатываете свои веб-приложения в Chrome, в его инструментах для разработчиков есть раздел под названием Audits .

Аудит проводится по многим сценариям, таким как загрузка изображений, поддержка без JS, отсутствие интернета, время для первого значимого рисования и т. Д. В конце вы получаете оценку производительности.

Запустите приложение React, откройте Инструменты разработчика и перейдите в раздел «Аудиты». Выберите целевую платформу (Mobile / Desktop) и запустите Audit.

В конце вы увидите список вещей, которые можно улучшить в вашем приложении. Очень удобный инструмент.

Answer 3

Одним из ключевых моментов в производительности будет размер анализируемого JS и количество операций DOM, которые выполняются одним и тем же.

При экспоненциальном росте количества компонентов,LOC будет расти вместе с ним.

Первичные рекомендуемые решения:

1. Загрузка компонентов по требованию с разделением кода и динамическим импортом
2. Пакетные операции DOM / диспетчеризация при использовании redux
3. Используйте PureComponents
4. HOC's