Автор оригинала: Jean-Paul Delimat.
При разработке в реакции вы когда-нибудь задавались вопросом, когда и почему компонент оказывать () Метод запускается? Или когда использовать менее очевидные методы жизненного цикла должен быть необходим ()?
Если ответ да, да, ваше приложение может иметь проблемы с производительностью. Прочитайте, и вы сможете их легко исправить.
Все сводится к тому, как реагировать под капотом. Большое обещание реагирования заключается в том, что он быстро пылает при рендерингах элементов на странице.
Для этого реагировать продолжает память две версии DOM:
- Версия DOM в данный момент отображается
- Следующая версия для отображения DOM
Он сравнивает два и обновляет отображаемый DOM только с частями, которые изменились. Этот процесс называется Вымирание дерева Отказ Корень дерева, оцениваемого для примирения, является компонентом, который реквизит изменились.
Отлично. Теперь, планируете ли вы на это или нет, ваше веб-приложение следует за контейнером/презентационными компонентами в некоторой степени. См. здесь и здесь для определений. Это означает, что каждый комплексной вид в вашем приложении выполнен из компонента контейнера, который содержит логику и имеет много Дисплей только компоненты как дети.
Это очень хороший шаблон. Если вы посмотрите ближе, хотя это означает, что любое взаимодействие пользователей на представлении повлияет на сам контейнер и вызвать оказать его и всех своих детей. Скажем, у вас есть список элементов с модным отображением текста, изображения и «Добавить в избранное» желтая звезда, как кнопка. Минимальная модель для элемента списка может быть:
product = {
imageUrl: '...',
title: '...',
isFavourite: false
}Список избранного может произойти из другого источника данных. Независимо от того, организация ваших компонентов, вероятно, выглядит что-то подобное:
Обработчик вызывается пользовательской кнопкой мыши и сохраняет сторону информационного сервера (или сохраняться в магазине или что-то еще) и запускает изменения в этом.
Результат одного щелчка триггеры рендеринга контейнера и всех строк в списке только для обновления одного флажка.
Это куда необходимо войти в игру. Вы можете сказать отреагировать не представлять строки, которые не нужно использовать этот метод.
class ListItem extends Component {
shouldComponentUpdate(nextProps, nextState) {
return nextProps.isFavourite != this.props.isFavourite;
}
...
}Вот конкретный регистр: на проекте App Marketplace у нас есть представление о управлении продуктами для продавцов. Список имел «нагрузку больше, как пользователь прокручивает» down “Pattern и inline Action Actions« Показать/скрыть », чтобы установить видимость каждого продукта. Все было хорошо, когда продавцы, где управляют <100 товаров на приборной панели. Тогда данный продавец начал входить и рекламировать более 300 товаров …
Перед обновленным пользователем ~ 600 мс. Лаг был определенно виден конечным пользователем. Используя Chrome Profiler Мы видели, что это воспользовалось реакцией ~ 2 мс, чтобы сделать один ряд. Раз 300 … мы добрались до 600 мс. Мы добавили SOCCOMPONENTUPDATE () проверки для правильных условий. Время рендеринга после пользовательского щелчка до 10 мс …
Я собрал небольшой проект, который позволяет воспроизводить этот случай здесь Отказ Запустите его и прочитайте комментарии кода, чтобы увидеть волшебство.
Предупреждение для пользователей Redux
Проблема, описанная выше, может произойти чаще, если вы используете Redux и повторно повторно (или подобные библиотеки действий «Магазин» библиотек действий).
С Redux и повторно повторно выталкиваете действия в магазине, и вы видите слушателей, чтобы хранить изменения, A.K.a. Селекторы. Селекторы находятся в глобальном масштабе в приложении и в большом приложении, для многих компонентов довольно легко отображать одинаковые селекторы. Изменения в магазине могут вызвать изменения реквизитов и, таким образом, рендеры, которые полностью не относятся к некоторым компонентам.
Вот запутанный совет: Не используйте целесообразно () для предотвращения рендеров в таких случаях. Логика внутри необходима необходима должна смотреть только на то, что имеет отношение к компоненту. Он никогда не должен предвидеть контексты, в которых используется компонент. Причина в том, что ваш код быстро станет неизвестным.
Если у вас есть такие проблемы, это означает, что ваша структура магазина неверна или селекторы недостаточно конкретны. Вам нужно добраться до нового моделирования.
Я рекомендую Эта удивительная котельная методические рекомендации. Он способствует хранению инкапсуляции на контейнер на высоком уровне с глобальной областью для ключевых структур данных, которые проводятся во всем приложении. Это довольно безопасный подход, чтобы избежать ошибок моделирования магазинов.
Спасибо за прочтение! Если вам понравилось, нажмите кнопку CLAP ниже. Это помогает другим людям увидеть историю.