2.4 Отрисовка Элементов

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

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

Код

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

В отличие от DOM-элементов браузера, элементы React – простые JS-объекты, поэтому в плане создания они являются очень дешевыми. React DOM сам заботится об обновлении DOM, чтобы соответствовать элементам React.

Внимание!

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

Предположим, где-нибудь в нашем HTML-файле есть тег <div>:

Код

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

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

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

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

Код

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

Посмотреть в CodePen

Он отображает "Hello World" на странице.

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

В настоящий момент мы знаем только один способ обновления UI: создание нового элемента и передача его в 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 DOM сравнивает элемент и его потомки из последнего вызова render() с элементом из предыдущего вызова render(). Далее он обновляет DOM, только если это необходимо, чтобы привести DOM в желаемое состояние.

Чтобы проверить это поведение, посмотрите данный пример, используя инструменты разработчика в браузере:

Вы могли заметить, что на каждый тик мы создаём элемент, описывающий целое UI-дерево. Однако обновится только текстовый узел, так как его содержимое изменилось

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