В реакции элемент — это наименьшая строительная единица, объект, а не элемент DOM; его можно определить в коде с помощью jsx, а синтаксис — «const element =...»; если вы его создали, его нельзя изменить. хотите изменить DOM, вы можете только создать новый элемент.
Операционная среда этого руководства: система Windows 10, версия 17.0.1, компьютер Dell G3.
Элемент
1.Элемент — это наименьшая строительная единица в реакции. Это объект, а не DOM, и стоимость его создания относительно невелика.
(1) Обычно мы используем JSX для определения элемента в коде:
const element = <h1>Привет, мир</h1>;(2) Используйте ReactDOM.render для рендеринга.
ReactDOM.render(element, document.getElementById('root'));2. После создания элемента его нельзя изменить. Это похоже на кадр в фильме. Если вы хотите изменить отображение DOM, вы можете только создать новый элемент.
3. React сравнит два элемента до и после и обновит только тот контент, который необходимо обновить.
Расширьте свои знания:
Виртуальный DOM
1. React не конструирует элементы DOM напрямую, а создает объекты, аналогичные структуре DOM. Затем на основе этой структуры рендерится настоящий DOM, то есть React DOM.
2. При изменении создайте новый объект, сравните его с предыдущей структурой и запишите разницу между ними. Алгоритм сравнения можно посмотреть здесь.
3. Затем DOM обновляется на основе записанных различий.
РеагироватьЭлемент
1. Виртуальный «ДОМ»;
2. Сущность — неизменяемый объект;
Атрибут типа: если это строка, например «h1», она представляет узел DOM, а его атрибут props предназначен для атрибутов узла DOM. Если атрибут типа представляет собой компонент, который представляет.
функция или класс, она представляет собой компонент;
3. Два типа ReactElement могут быть вложены друг в друга и смешаны друг с другом для описания дерева DOM;