Элементы - это самые маленькие строительные блоки приложений React. Элемент описывает, что вы хотите видеть на экране:
const element = <h1>Hello, world</h1>;
В отличие от элементов DOM браузера элементы React являются обычными объектами и дешевы для создания. React DOM заботится об обновлении DOM для соответствия элементам React.
Предоставление элемента в DOM
Предположим, что есть <div> где-то в вашем файле HTML:
<div id="root"></div>
Это «корневой» узел DOM, потому что все внутри него будет управляться React DOM.
Приложения, созданные только с помощью React, обычно имеют один корневой узел DOM. Если вы интегрируете React в существующее приложение, у вас может быть как можно больше изолированных корневых узлов DOM.
Чтобы визуализировать элемент React в корневом узле DOM, передайте оба значения ReactDOM.render():
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
На странице отображается «Hello, world».
Обновление выделенного элемента
Реагирующие элементы неизменяемы . Создав элемент, вы не сможете изменить его дочерние элементы или атрибуты. Элемент похож на один кадр в фильме: он представляет собой пользовательский интерфейс в определенный момент времени.
Насколько нам известно, единственный способ обновить интерфейс - это создать новый элемент и передать его ReactDOM.render().
Рассмотрим этот пример тактирующих часов:
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
Он вызывает ReactDOM.render()каждую секунду от setInterval() обратного вызова.
Реагировать только на обновления
React DOM сравнивает элемент и его дочерние элементы с предыдущим и применяет только обновления DOM, необходимые для перевода DOM в желаемое состояние.
Несмотря на то, что мы создаем элемент, описывающий все дерево пользовательского интерфейса на каждом тике, только текстовый узел, содержимое которого изменилось, обновляется в React DOM.
0 комментариев