Визуальное руководство по React Rendering — DOM

Визуальное руководство по React Rendering - DOM

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

Визуальное руководство по React Rendering - DOM

В приведенном выше примере компоненты A, B и C повторно визуализируются в ответ на визуализацию приложения. Давайте откроем инструменты разработчика и посмотрим, что происходит в DOM.

Визуальное руководство по React Rendering - DOM

Несмотря на то, что React повторно отображает каждый компонент в дереве, он не обновляет каждый узел в DOM. React обновляет только текстовый узел, который должен изменяться визуально.

Ключевой частью этого является понимание того, что «рендеринг» — это не то же самое, что «обновление DOM», и компонент может быть отрисован без каких-либо видимых изменений.Марк Эриксон — Полное руководство по поведению при рендеринге в React.

А что насчет контекста?

Визуальное руководство по React Rendering - DOM

Компоненты A и B в повторном рендеринге не нужны. Мы можем предотвратить это, заключив компонент A в оболочку memo, но сначала давайте взглянем на DOM:

Визуальное руководство по React Rendering - DOM

React достаточно умен, чтобы обновлять DOM только там, где это необходимо, даже в таких сложных случаях. React DOM сравнивает элемент и его дочерние элементы с предыдущим состоянием и применяет только те обновления DOM, которые необходимы для приведения DOM в желаемое состояние.React Docs — React только обновляет то, что необходимо.

Представление

Итак, мы знаем, что рендеринг React не означает обновление DOM. Поэтому ненужные отрисовки не всегда приводят к дорогостоящим манипуляциям с DOM. Фактически, постоянный повторный рендеринг — один из основных принципов React. Однако, если у вас много вычислений внутри ваших компонентов React, они могут складываться и вызывать проблемы с производительностью. Вот почему вам нужно исправить медленную визуализацию, прежде чем исправлять повторную визуализацию.

Автор: Alex Sidorenko

Источник: alexsidorenko.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен