Reactdom render что это
Мельчайшими блоками приложения React являются элементы. Определение простейшего элемента:
const element =Hello, React
;
По сути элементы в React — это обычные объекты JavaScript, с которыми быстрее работать, чем с обычными элементами на веб-странице.
Для рендеринга элементов в React вначале необходимо определить корневой элемент, в который будет производиться рендеринг. Для этого применяется метод ReactDOM.createRoot() . В него передается элемент веб-страницы, в котором будет производиться рендеринг
const rootNode = document.getElementById("app"); // элемент для рендеринга приложения React // получаем корневой элемент const root = ReactDOM.createRoot(rootNode);
Здесь константа rootNode представляет некоторый элемент html-страницы с id=»app» . И в данном случае именно в этот элемент будет производиться рендеринг приложения React. Результатом метода ReactDOM.createRoot является объект ReactDOMRoot (в данном случае он представлен константой root ), который представляет указатель на структуру данных, которую инфраструктура React использует для отслеживания дерева элементов для рендеринга.
Непосредственно для рендеринга у объекта ReactDOMRoot вызывается метод render() . В этот метод передается компонент, который мы хотим отобразить на веб-странице. Например, рендеринг заголовка.
root.render(Hello React
, // элемент, который мы хотим создать )
Элемент React может иметь только один корневой элемент, в который уже вкладываются все остальные элементы. Например, создадим новый проект. Определим в проекте следующий файл index.html :
В данном случае корневым элементом является , который будет добавляться на веб-страницу в элемент с >
При этом в один элемент DOM можно добавить только один элемент ReactElement, например, добавим еще один элемент на веб-страницу:
Обновление элементов
Элементы React являются неизменяемыми (immutable). После создания элемента нельзя изменить его атрибуты или дочерние элементы. И единственный способ изменить интерфейс, определенный в элементе, это создать новый элемент и передать его в функцию ReactDOM.render(). Например:
METANIT.COM
В данном случае в элементе с будет отображаться текущее время, однако, чтобы каждую секунду изменялось отображаемое значение, там надо повторно вызывать функцию для элемента.
При обновлении элемента виртуальный React DOM сравнивает текущее состояние элемента с его предыдущим состоянием и при наличии изменений применяет их к веб-странице и обновляет стандартный DOM. Но обновляться будет не весь пересоздаваемый элемент, а только текстовый узел, который содержит вывод текущего времени, так как только этот узел будет отличаться от предыдущего состояния.
Рендеринг элементов
Элемент описывает то, что вы хотите увидеть на экране:
const element = h1>Hello, worldh1>;В отличие от DOM-элементов, элементы React — это простые объекты, не отнимающие много ресурсов. React DOM обновляет DOM, чтобы он соответствовал переданным React-элементам.
Примечание:
Элементы можно перепутать с более известной концепцией «компонентов». С компонентами мы ознакомимся в следующей главе. Элементы — это то, «из чего сделаны» компоненты, и мы рекомендуем вам дочитать эту главу, прежде чем двигаться дальше.
Рендеринг элемента в DOM
Допустим, в вашем HTML-файле есть :
div id="root">div>Мы назовём его «корневым» узлом DOM, так как React DOM будет управлять его содержимым.
Обычно в приложениях, написанных полностью на React, есть только один корневой элемент. При встраивании React в существующее приложение вы можете рендерить во столько независимых корневых элементов, во сколько посчитаете нужным.
Для рендеринга React-элемента, сперва передайте DOM-элемент в ReactDOM.createRoot() , далее передайте React-элемент в root.render() :
const root = ReactDOM.createRoot( document.getElementById('root') ); const element = h1>Hello, worldh1>; root.render(element);На странице будет написано «Hello, world».
Обновление элементов на странице
Элементы React иммутабельны. После создания элемента нельзя изменить его потомков или атрибуты. Элемент похож на кадр в фильме: он отражает состояние интерфейса в конкретный момент времени.
Пока что мы знаем только один способ обновить интерфейс — это создать новый элемент и передать его в root.render() .
Рассмотрим пример с часами:
const root = ReactDOM.createRoot( document.getElementById('root') ); function tick() const element = ( div> h1>Hello, world!h1> h2>It is new Date().toLocaleTimeString()>.h2> div> ); root.render(element);> setInterval(tick, 1000);В этом примере root.render() вызывается каждую секунду с помощью колбэка setInterval() .
Примечание:
На практике большинство React-приложений вызывают root.render() только один раз. В следующем разделе вы узнаете, как можно обновлять интерфейс при помощи компонента с состоянием.
Мы рекомендуем не пропускать главы, поскольку каждая следующая глава опирается на знания из предыдущей.
React обновляет только то, что необходимо
React DOM сравнивает элемент и его дочернее дерево с предыдущей версией и вносит в DOM только минимально необходимые изменения.
Вы можете убедиться в этом на последнем примере с помощью инструментов разработки в браузере:
Несмотря на то, что мы создаём элемент, описывающий всё UI-дерево, каждую секунду React DOM изменяет только текстовый узел, содержимое которого изменилось.
Проще описать, как интерфейс выглядит в конкретный момент, чем как он изменяется с течением времени. По нашему опыту, такой подход позволяет избавиться от целого класса ошибок.
Рендеринг элементов¶
Элемент описывает то, что вы хотите увидеть на экране:
const element = h1>Hello, world/h1>; В отличие от DOM-элементов, элементы React — это простые объекты, не отнимающие много ресурсов. React DOM обновляет DOM, чтобы он соответствовал переданным React-элементам.
Примечание:
Элементы можно перепутать с более известной концепцией «компонентов». С компонентами мы ознакомимся в следующей главе. Элементы — это то, «из чего сделаны» компоненты, и мы рекомендуем вам дочитать эту главу, прежде чем двигаться дальше.
Рендеринг элемента в DOM¶
Допустим, в вашем HTML-файле есть :
div id="root">div> Мы назовём его «корневым» узлом DOM, так как React DOM будет управлять его содержимым.
Обычно в приложениях, написанных полностью на React, есть только один корневой элемент. При встраивании React в существующее приложение вы можете рендерить в столько независимых корневых элементов, сколько посчитаете нужным.
Для рендеринга React-элемента в корневой узел DOM, вызовите ReactDOM.render() с React-элементом и корневым DOM узлом в качестве аргументов:
const element = h1>Hello, world/h1>; ReactDOM.render(element, document.getElementById('root')); На странице будет написано «Hello, world».
Обновление элементов на странице¶
Элементы React иммутабельны. После создания элемента, нельзя изменить его потомков или атрибуты. Элемент похож на кадр в фильме: он отражает состояние интерфейса в конкретный момент времени.
Пока что, мы знаем только один способ обновить интерфейс — это создать новый элемент и передать его в ReactDOM.render() .
Рассмотрим пример с часами:
1 2 3 4 5 6 7 8 9 10 11 12
function tick() const element = ( div> h1>Hello, world!/h1> h2>It is new Date().toLocaleTimeString()>./h2> /div> ); // highlight-next-line ReactDOM.render(element, document.getElementById('root')); > setInterval(tick, 1000); В этом примере ReactDOM.render() вызывается каждую секунду с помощью колбэка setInterval() .
Примечание:
На практике большинство React-приложений вызывают ReactDOM.render() только один раз. В следующем разделе вы узнаете, как можно обновлять интерфейс при помощи компонента с состоянием.
Мы рекомендуем не пропускать главы, поскольку каждая следующая глава опирается на знания из предыдущей.
React обновляет только то, что необходимо¶
React DOM сравнивает элемент и его дочернее дерево с предыдущей версией и вносит в DOM только минимально необходимые изменения.
Вы можете убедиться в этом с помощью инструментов разработки в браузере:
Несмотря на то, что мы создаём элемент, описывающий всё UI-дерево, каждую секунду React DOM изменяет только текстовый узел, содержимое которого изменилось.
Проще описать, как интерфейс выглядит в конкретный момент, чем как он изменяется с течением времени. По нашему опыту, такой подход позволяет избавиться от целого класса ошибок.
ReactJS — Рендеринг элементов
Элементы — это самые маленькие строительные блоки приложений React. Элемент описывает, что вы хотите видеть на экране:
const element = Hello, world
;В отличие от элементов DOM браузера элементы React являются обычными объектами и дешевы для создания. React DOM заботится об обновлении DOM для соответствия элементам React.
Предоставление элемента в DOM
Предположим, что есть где-то в вашем файле HTML:
Это «корневой» узел DOM, потому что все внутри него будет управляться React DOM.
Приложения, созданные только с помощью React, обычно имеют один корневой узел DOM. Если вы интегрируете React в существующее приложение, у вас может быть как можно больше изолированных корневых узлов DOM.
Чтобы визуализировать элемент React в корневом узле DOM, передайте оба значения ReactDOM.render():
const element = Hello, world
; ReactDOM.render(element, document.getElementById('root'));На странице отображается «Hello, world».
Обновление выделенного элемента
Реагирующие элементы неизменяемы . Создав элемент, вы не сможете изменить его дочерние элементы или атрибуты. Элемент похож на один кадр в фильме: он представляет собой пользовательский интерфейс в определенный момент времени.
Насколько нам известно, единственный способ обновить интерфейс — это создать новый элемент и передать его ReactDOM.render().
Рассмотрим этот пример тактирующих часов:
function tick() < const element = ( Hello, world!
It is .
); ReactDOM.render(element, document.getElementById('root')); > setInterval(tick, 1000);Он вызывает ReactDOM.render()каждую секунду от setInterval() обратного вызова.
Реагировать только на обновления
React DOM сравнивает элемент и его дочерние элементы с предыдущим и применяет только обновления DOM, необходимые для перевода DOM в желаемое состояние.
Несмотря на то, что мы создаем элемент, описывающий все дерево пользовательского интерфейса на каждом тике, только текстовый узел, содержимое которого изменилось, обновляется в React DOM.