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

0 5

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

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

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

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

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

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

— Марк Эриксон — Полное руководство по поведению при рендеринге в React.

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

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

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

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

— React Docs — React только обновляет то, что необходимо.

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

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

Автор: Alex Sidorenko

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

Оставьте ответ

Ваш электронный адрес не будет опубликован.