Отрисовка элементов в React
Элементы являются самыми маленькими строительными блоками React приложений.
Элемент описывает то, что вы хотите видеть на экране:
const element = <h1>Привет, мир</h1>;
В отличие от DOM-элементов браузера, элементы React - это простые объекты, которые легко создавать. React DOM отвечает за обновление DOM с целью его совпадения с элементами React.
Элементы можно спутать с более широко известным понятием компоненты. Мы будем использовать компоненты в разделе Компоненты и свойства. Элементы являются строительным материалом для компонентов, поэтому прежде чем двигаться дальше изучите этот раздел.
Отрисовка элемента в DOM
Предположим, где-то в вашем HTML-файле есть тег <div>:
<div id="root"></div>
Мы будем называть его корневым узлом DOM, потому что все, что внутри него, будет управляться React DOM.
Приложения, созданные только на React, чаще всего имеют один корневой узел DOM. В случае интеграции React в существующее приложение, вы можете иметь столько изолированных корневых узлов DOM, сколько вам нужно.
Для отображения React-элемента в корневом узеле DOM выполните ReactDOM.render()
:
const element = <h1>Привет, мир</h1>;;
ReactDOM.render(
element,
document.getElementById('root')
);
Запустите этот пример на CodePen и вы увидите на странице надпись "Привет, мир".
Обновление элементов в React
React-элементы являются неизменными. После создания элемента, вы не можете изменить его дочерние модули или атрибуты. Элемент подобен одному кадру в фильме, т.е. представляет собой пользовательский интерфейс в определенный момент времени, следовательно, единственный способ для обновления пользовательского интерфейса - это создать новый элемент и передать его 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);
Запустите этот пример на CodePen.
Мы вызываем ReactDOM.render()
каждую секунду из setInterval()
.
На практике большинство React приложений вызывает ReactDOM.render()
только один раз. В следующих разделах мы узнаем, как такой код инкапсулируется в структурированные компоненты.
Мы рекомендуем вам не пропускать темы, поскольку они связаны друг с другом.
React обновляет только то, что необходимо
React DOM сравнивает элемент и его дочерние модули с предыдущими, и обновляет DOM лишь тогда, когда его необходимо обновить до нужного состояния. Вы можете убедиться в этом изучив последний пример в этом разделе с помощью DOM-инспектора браузера:
Даже если мы создаем элемент, описывающий все дерево пользовательского интерфейса, только текстовый узел, содержимое которого изменилось, будет обновляется при помощи React DOM.
По нашему опыту, размышления о том, как пользовательский интерфейс должен выглядеть в любой момент времени, а не как изменить его, устраняет массу ошибок.