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

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

Пример для элемента;

const element = <h1>Hello World!</h1>;

Элементы против компонентов

Элементы — это то, из чего состоят компоненты.

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

<div id=“root”></div>

HTML-файл может содержать приведенный выше код. (корневой элемент DOM)

const element = <h1>Hello World!</h1>;
ReactDOM.render(element, document.getElementById(‘root’));

Вы можете визуализировать и использовать элементы, как указано выше.

Обновление отображаемых элементов

Элементы неизменны. Поэтому, чтобы обновить его, вам нужно создать новый элемент и передать его методу рендеринга.

Вот пример из React Docs.

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);

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

Традиционная модель пользовательского интерфейса

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

Реагировать модель

Элемент — это объект. Он описывает экземпляр компонента или узел DOM. Вы не можете вызывать для него методы. Можно сказать, что это неизменяемый объект описания. Он имеет два поля: type и props.

Если тип является строкой, элемент представляет узел DOM, а если тип является функцией, элемент является компонентом.

Элементы могут быть вложены друг в друга и создаваться в виде древовидной структуры. В этом дереве и родитель, и потомок являются объектами. Обойти это дерево несложно. Разбор не требуется. И части дерева легче, чем элементы DOM.

Компонентные элементы

  1. Элемент может описывать узел DOM
  2. Элемент также может описывать компонент

В одном дереве могут быть элементы DOM и элементы компонентов. Каждая часть этого дерева выражает отношения через композицию. Поэтому части разъединены. Поскольку разные типы являются частью одного и того же дерева, вы можете создавать части пользовательского интерфейса независимо друг от друга. Вот почему React называют быстрым.

Примирение

Способ, которым React составляет дерево компонентов, называется согласованием. Это нисходящий процесс, когда React спрашивает каждый элемент, каковы его дочерние элементы. Это помогает обновлять только части приложения, необходимые части. Это помогает React работать очень быстро.