Unetway

ReactJS - Рендеринг элементов

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

На странице отображается «Hello, world».

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

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

Насколько нам известно, единственный способ обновить интерфейс - это создать новый элемент и передать его 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);

Он вызывает ReactDOM.render()каждую секунду от setInterval() обратного вызова.

Реагировать только на обновления

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