Обмен технологиями

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Мой английский ограничен, мои навыки посредственные, и я очень хорошо осведомлен. Поскольку я не переводчик, есть много случайных переводов. Если вы мне не верите, пожалуйста, прочитайте оригинальный текст~~

Исходный адрес:https://facebook.github.io/react/docs/advanced-performance.html

---

###Оптимизация производительности

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

####Избегайте прямого воздействия на DOM
React реализует уровень виртуального DOM, который используется для отображения собственного дерева DOM браузера. Благодаря этому уровню виртуального DOM React может избежать прямого управления DOM, поскольку скорость прямого управления DOM браузера намного ниже, чем скорость работы с объектами JavaScript. Всякий раз, когда свойства или статус компонента изменяются, реакция создает в памяти новый виртуальный dom и сравнивает его с исходным старым, чтобы определить, нужно ли обновлять дерево dom браузера, тем самым оптимизируя рендеринг dom в максимальной степени. возможна потеря производительности.

Кроме того, React предоставляет функции жизненного цикла компонентов.shouldComponentUpdate, компонент вызовет эту функцию перед принятием решения о повторной визуализации (после завершения сравнения виртуального DOM и создания окончательного DOM). Эта функция дает разработчику право на повторную визуализацию, и по умолчанию функция возвращает результат.true, указывая, что обновление DOM будет запущено напрямую по умолчанию:

shouldComponentUpdate: function(nextProps, nextState) {
	return true;
}

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

Например, у вас есть приложение чата с несколькими сообщениями. Если в данный момент изменится только одно из них, вы реализуете следующее.shouldComponentUpdate, React будет избегать повторного рендеринга тех постов, которые не изменились в зависимости от ситуации:

shouldComponentUpdate: function(nextProps, nextState) {
	// TODO: return whether or not current chat thread is different to former one.
	// 根据实际情况判断当前帖子的状态是否和之前不同
}

Короче говоря, React максимально избегает дорогостоящих операций DOM и позволяет разработчикам вмешиваться в такое поведение.

####shouldComponentUpdate в действии
Вот пример компонента, содержащего дочерние элементы, как показано ниже:

Предыдущий Следующий