Как работает setState React

Как работает setState React

От автора: React быстр! Частично это достигается за счет обновления только тех частей DOM, которые в этом нуждаются. Меньше того, о чем вам нужно беспокоиться, и больше скорости. Пока вы понимаете, что работает React setState (), вы можете продолжать. Тем не менее, важно также знать то, как эта удивительная библиотека обновляет DOM вашего приложения. Это знание будет играть важную роль в вашей работе в качестве разработчика React.

DOM?

Браузер создает DOM, анализируя код, который вы пишете, он делает это до того, как отобразит страницу. DOM представляет документы на странице в виде узлов и объектов, обеспечивая интерфейс, чтобы языки программирования могли подключаться к DOM и манипулировать им. Проблема с DOM заключается в том, что он не оптимизирована для приложений динамического интерфейса. Таким образом, обновление DOM может замедлить ваше приложение, когда есть много вещей, которые нужно изменить; поскольку браузер должен повторно применять все стили и отображать новые HTML-элементы. Это также происходит в ситуациях, когда ничего не меняется.

Что такое согласование?

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

Давайте расстроим простой компонент, который добавит два числа. Числа будут введены в поле ввода.

React JS. Основы

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

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

Сначала нам нужно настроить начальное состояние для полей, а затем обновить состояние при вводе числа. Компонент будет выглядеть так:

При первоначальном рендеринге дерево DOM будет выглядеть так:

Как работает setState React

Когда производится запись в первое поле ввода, React создает новое дерево. Новое дерево, являющееся виртуальным DOM, будет содержать новое состояние для entry1. Затем React сравнивает виртуальный DOM со старым, и вычисляет разницу между обеими DOM, после чего выполняет обновление только той части, которая отличается. Новое дерево создается каждый раз, когда изменяется состояние компонента приложения — когда значение вводится в любом из полей ввода или при нажатии кнопки.

Как работает setState React

Определение различий элементов

Когда состояние компонента изменяется так, что элемент необходимо изменить из одного типа в другой, React отключает все дерево и создает новое с нуля. Это приводит к уничтожению каждого узла в этом дереве. Давайте рассмотрим пример:

При первоначальном рендере вы увидите div и его содержимое, а также нажатие кнопки вызывает React для удаления дерева div с его содержимым и построения вместо этого дерева для элемента <p>. То же самое происходит, если в обоих случаях мы имеем один и тот же компонент. Компонент будет удален вместе с предыдущим деревом, к которому он принадлежал, и будет создан новый экземпляр. См. демо-версию ниже.

React JS. Основы

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

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

Список различий

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

Другими словами, React изменяет каждый элемент в списке, который не имеет ключей. Вот пример:

Здесь мы имеем два массива, которые отображаются в зависимости от состояния компонента. Реакт не располагает способом отслеживать элементы в списке, поэтому он обязан изменять весь список каждый раз, когда возникает необходимость повторного рендеринга. Это приводит к проблемам с производительностью.

В консоли вы увидите предупреждение, подобное этому:

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

Заключение

Итак, вот два основных преимущества которые дает применение концепции согласования в React:

React может сделать ваш пользовательский интерфейс быстрым, но ему нужна ваша помощь. Понимание процесса согласования.

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

Автор: Kingsley Silas

Источник: https://css-tricks.com/

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

React JS. Основы

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

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

ReactJS: основы

Изучите основы ReactJS и создайте ваше первое приложение на ReactJS с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree