Рендеринг елементов React

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

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

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

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

Note

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

Рендеринг элемента в DOM

предположим, что где-то в вашемHTML файле есть

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

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

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

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

Обновление DOM елемента

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

Насколько нам известно, единственный способ обновить интерфейс - создать новый элемент и передать его в ReactDOM.render().

1
function tick() {
2
  const element = (
3
    <div>
4
      <h1>Hello, world!</h1>
5
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
6
    </div>
7
  );
8
  ReactDOM.render(
9
    element,
10
    document.getElementById('root')
11
  );
12
}
13

14
setInterval(tick, 1000);

Note

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

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

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

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

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