Понимание процесса рендеринга пользовательского интерфейса React (глубокое понимание виртуального пространства) 

Прежде чем начать, давайте обсудим этот основной вопрос.

Что делает React?

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

Простой компонент с использованием JSX

Этот компонент внутренне возвращает объекты react, называемые элементами, которые выглядят примерно так.

Это простой предмет. Давайте разберемся в свойствах по порядку.

1. type
   Свойство type представляет собой строковую ссылку на тег HTML. React внутренне называет это компонентным элементом.
   Когда мы импортируем main из "../components/main", имя компонента становится импортируемым типом.
2. key
   Используется для однозначной идентификации элементов среди родственных элементов.
   Это происходит, когда мы вручную создаем группу дочерних элементов, т.е. когда мы отображаем массив и визуализируем группу компонентов с разными данными. Мы используем ключ при их рендеринге, и, следовательно, ключ подставляется в это свойство.
   Пример
   

1. ref
   ref - ссылка на реальный узел DOM. Если вы когда-либо использовали функцию create ref или ловушку useRef, то здесь эти значения попадают.
2. $$ typeof
   На самом деле это функция безопасности. Его значения всегда являются символом.Поэтому, если у вас есть скомпрометированный сервер, на котором вы выполняете вызов API, возвращаете некоторые данные и пытаетесь отобразить их через свои компоненты. React прямо отвергнет это.
3. Реквизиты
   В нашем случае у нас только что был 1 дочерний элемент, который является h1, следовательно, типом является h1. key и ref равны нулю,
   а его дочерние элементы были текстовой строкой с "look ma!" и с названием id.
   Потомки могут быть объектом или массивом объектов.

Ревью

1. Так что запись в DOM и рендеринг DOM - очень дорогостоящая задача. Вот здесь и появляется react.
2. Этот объект и его дочерние элементы известны как virtual dom.
3. Действительно затратно писать в dom, но эти объекты действительно легко сгенерировать, и они могут cделать это очень быстро.

Согласование

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

Пример:

1. Предположим, у нас есть список продуктов, и мы щелкнули, чтобы получить один отдельный продукт.
2. Когда мы щелкнули, список продуктов элемента исчезнет, ​​следовательно, он также будет удален из DOM.
3. Существует разница между собственным элементом DOM и элементом компонента.

Согласование - элемента DOM:

1. Здесь имя класса элемента DOM изменяется. React находит узел DOM и обовит имя класса и ничего больше, и он будет рекурсивно обращаться к любым дочерним элементам, если они есть.

Сверка - Компонентный элемент:

1. React обновляет свойство экземпляра базового компонента, чтобы оно соответствовало новому элементу. И вызывается метод рендеринга. Алгоритм сравнения повторяет старый результат и новый результат до конца дерева.

Согласование - Дети

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

Что, если мы изменим последовательность?

1. Здесь мы видим последовательность старых элементов, просто мы добавили новый узел DOM и изменили последовательность, но React этого не понимает. Он идет и видит, что первый узел изменен, и удаляет предыдущий узел DOM, который является star wars, и заменяет его Spaceballs аналогично для второго, и видит, что третий был добавлен, следовательно, добавляется третий.
2. Здесь мы видим, что рендерим все элементы снова и снова, но мы можем сохранить эти вещи с помощью ключей.

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

Теперь react спускается по дереву и видит, что ключ best уже начал войны, который уже присутствовал, second best в star trek также присутствует, но actual best в spaceballs не было, и он был добавлен, поэтому мы добавим его в узел DOM.

Рендеринг

1. Итак, здесь функция рендеринга React DOM отвечает за создание react виртуальной DOM, создает дерево элементов, которое мы обсуждали в начале, и добавляет его в фактическую DOM.
2. FYI react и response dom - это две разные библиотеки, поэтому работа с react - это просто сделать различную часть, а не что-то большее. React DOM создает виртуальную DOM и присоединяется к фактической DOM.

React Fiber

1. Фактический рендеринг происходит с помощью React Fibre.
2. React fiber находится между элементом и узлом DOM и вставляет элемент в узел DOM.

Заключение:

1. Пишем компонент.
2. Получаем экземпляр компонента.
3. Его состояние принимает реквизиты, которые он вычисляет.
4. Затем он генерирует дерево элементов. Это дерево элементов и есть наш виртуальный дом.
5. И с этого начинается процесс согласования.
6. Затем его передают в процесс рендеринга.
7. Затем React DOM берет его и фактически генерирует узел DOM с помощью React fiber.