ReactJS виртуальный DOM в памяти и применение дополнительных изменений

Question

Стал ниже оператор в той или иной форме в Google

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

1. Всякий раз, когда что-либо могло измениться, весь пользовательский интерфейс будет повторно отображаться в представлении Virtual DOM.

2. Будет вычислена разница между предыдущим представлением Virtual DOM и новым.

3. Реальное DOM будет обновлено с тем, что фактически изменилось. Это очень похоже на применение патча.

Я новичок в React и хотел бы понять выше, как три вышеуказанных пункта работали в предреактивной эпохе, скажем, в jQuery (илиnative JS).

jQuery

1. HTML был создан на стороне сервера и отправлен обратно в браузер. Браузер проанализирует, отобразит, разметит и раскрасит его.
2. Скажем, любой новый элемент DOM создан или скрыт при каком-либо пользовательском событии или при загрузке.
3. Будет ли jQuery воссоздавать полный DOM? Из третьего пункта, изложенного выше, похоже, что React просто обновляет DOM только для части, которая была изменена, но другая система (в первую очередь, jQuery или собственный JS) воссоздает полный DOM. Это правильно?
4. Верна ли третья точка только для изменений DOM или даже когда изменяется состояние любого компонента пользовательского интерфейса, например, заполнение текстового поля / выпадающего списка и т. Д.?

Answer 1

Будет ли jquery воссоздавать полный DOM? Из третьего пункта, изложенного выше, похоже, что React просто обновляет DOM только для части, которая была изменена, но другая система (в основном jquery или нативная js) воссоздает полный DOM. Это правильно?

jQuery

---

Нет, jQuery не воссоздает DOM. Вместо этого он перемещается по дереву DOM с помощью селекторов, предоставленных для внесения соответствующих изменений. Это делает jQuery очень похожим на React, но его проблемы с производительностью связаны с тем, как был разработан код, и с его интенсивным использованием шаблона проектирования фасада . Это нормально для любой более крупной библиотеки, которая должна поддерживать несколько браузеров, таких как Chrome, Firefox, Opera и т. Д.

Angular 1

---

Фреймворк, который использовался дляперекрасить весь DOM был Angular 1. Клиент будет вносить некоторые изменения и перерисовывать каждый раз, когда вызывается $scope.apply или $scope.digest. Это, в сочетании с огромным количеством слушателей на больших страницах для двухсторонней привязки данных, было одной из основных причин, по которым Angular пришлось претерпеть значительные изменения, чтобы сохранить конкурентоспособность. Angular 8, вероятно, эквивалентен React, но один получил большее распространение, чем другой.

React

---

React обновляет только DOM, который был изменен. Это часть его "секретного соуса". Наряду с его компонентно-ориентированной архитектурой и ранним внедрением одностороннего связывания данных, он видел большой успех. Возможно, React начинает становиться все более раздутым, так как существует такое широкое распространение. Это нормально для любого проекта, который получает широкое распространение. Это только вопрос времени, когда люди увидят React как массу проблем с производительностью, и мы создадим новую среду.

Альтернативы

---

Есть дажеболее быстрые фреймворки, чем React, такие как Elm lang . Ничто никогда не сравнится с чистым Javascript (например, document.querySelector()), поскольку по своей сути все фреймворки используют егоВ этот момент вы начинаете сталкиваться с другими компромиссами, такими как отсутствие внешних библиотек, от которых вы можете зависеть, или трудности в обслуживании больших кодовых баз интерфейса.

---

Верна ли третья точка только для изменений domили даже когда состояние какого-либо компонента пользовательского интерфейса изменяется, например заполнение текстового поля / выпадающего списка и т. д.?

Для jQuery или чистого JS третья точка не верна. Существует специальный обработчик on-click, который запускает функцию, которая вносит небольшие изменения.

Для чего-то вроде Angular это может быть правдой, если есть изменения в scope, которые вызывают перерисовку. То же самое относится и к React. Если ваша кнопка submit должна перенаправить вас на совершенно другую страницу, она будет в основном перекрашивать DOM.