DevGang
Авторизоваться

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

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

Что делает React?

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

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

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

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

  1. type
    Свойство type представляет собой строковую ссылку на тег HTML. React внутренне называет это компонентным элементом.
    Когда мы импортируем main из "../components/main", имя компонента становится импортируемым типом.
  2. key
    Используется для однозначной идентификации элементов среди родственных элементов.
    Это происходит, когда мы вручную создаем группу дочерних элементов, т.е. когда мы отображаем массив и визуализируем группу компонентов с разными данными. Мы используем ключ при их рендеринге, и, следовательно, ключ подставляется в это свойство.
    Пример
this.state.data.map((item,i) => <li key={i}>Test</li>)
  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.

Источник:

#JavaScript #React
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

В подарок 100$ на счет при регистрации

Получить