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

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

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

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

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

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

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

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

Код
    
    <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" на странице.


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

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() только один раз. В следующих разделах мы изучим как такой код инкапсулируется в компоненты с состоянием.

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

2.4.3 React обновляет только то, что необходимо

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

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

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

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