Отрисовка React элементов (Rendering Elements)

Элементы являются наименьшими строительными блоками React приложения.

Элемент описывается что мы хотим видеть на экране:

const element = <h1>Hello, world</h1>;

В отличие от DOM элементов браузера, React  элементы являются являются простыми объектами и создаются очень легко (дёшевы в создании). React заботиться об обновлении DOM, чтобы сохранялось соответствие с React элементами.

Примечание:

Можно было бы перепутать элементы с более широко известным понятием «компоненты». Мы будем изучать компоненты в следующем разделе. Элементы это то, из чего состоят компоненты, и мы рекомендуем вам прочитать этот раздел, прежде чем прыгать вперед.

Отрисовка элементов в DOM

Скажем где-то в вашем HTML файле есть <DIV>:

<div id="root"></div>

Мы называем это «корнем» / «root» DOM узла, потому что внутри будет управляться через React DOM.

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

Чтобы отрисовать React элемент в корневой узел  DOM, передайте в значения в  ReactDOM.render():

const element = <h1>Hello, world</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

Попробуйте на CodePen.

На странице будет выведено «Hello World».

Обновление отрисованных элементов

React элементы являются неизменными (immutable). После создания элемента, вы не можете изменить его дочерние узлы или атрибуты. Элемент подобен одному кадру в фильме: он представляет собой пользовательский интерфейс в определенный момент времени.

Но мы знаем, что единственный способ для обновления пользовательского интерфейса -создание нового элемента, и передача его 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() вызывается каждые несколько секунд из функции обратного вызова (callback) setInterval() .

Примечание:

На практике большинство приложений React вызывает ReactDOM.render () только один раз. В следующих разделах мы узнаем, как воплощается  такой код в компонентах, сохраняющих состояние.

Мы рекомендуем вам не пропустить темы, потому что они могли основываться друг на друге.

React только обновляет. Что  необходимо

React DOM сравнивает элемент и его дочерние узлы с предыдущим состоянием, и только тогда применяет обновления, необходимые для приведения DOM в желаемое состояние.

Вы можете проверить  последний пример в браузерном инструменте:

DOM inspector showing granular updates

Даже если мы на каждом тике создаем элемент, описывающий все дерево UI, обновляется только текстовый узел, содержимое которого изменилось при помощи React DOM.

По нашему опыту, лучше думать о том, как должен выглядеть пользовательский интерфейс  в любой момент времени , а не о том, как изменять его в течение продолжительного времени. Это позволяет избежать ошибок.