Элементы рендеринга

Элементы — это самые маленькие строительные блоки приложений 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'));

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

Это отображает «Привет, мир» на странице.

Обновление рендеренного элемента

Элементы 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 обновляет только узел текста, содержимое которого изменилось.

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