![\"В](\"/c158617ed7cc0eac8f58330e49e48224/granular-dom-updates.gif\")
Элементы — мельчайшие кирпичики React-приложений.
\nЭлемент описывает то, что вы хотите увидеть на экране:
\nconst element = <h1>Hello, world</h1>;В отличие от DOM-элементов, элементы React — это простые объекты, не отнимающие много ресурсов. React DOM обновляет DOM, чтобы он соответствовал переданным React-элементам.
\n\n\nПримечание:
\nЭлементы можно перепутать с более известной концепцией «компонентов». С компонентами мы ознакомимся в следующей главе. Элементы — это то, «из чего сделаны» компоненты, и мы рекомендуем вам дочитать эту главу, прежде чем двигаться дальше.
\n
Допустим, в вашем HTML-файле есть <div>:
<div id=\"root\"></div>Мы назовём его «корневым» узлом DOM, так как React DOM будет управлять его содержимым.
\nОбычно в приложениях, написанных полностью на React, есть только один корневой элемент. При встраивании React в существующее приложение вы можете рендерить во столько независимых корневых элементов, во сколько посчитаете нужным.
\nДля рендеринга React-элемента в корневой узел DOM вызовите ReactDOM.render() с React-элементом и корневым DOM узлом в качестве аргументов:
const element = <h1>Hello, world</h1>;\nReactDOM.render(element, document.getElementById('root'));На странице будет написано «Hello, world».
\nЭлементы React иммутабельны. После создания элемента нельзя изменить его потомков или атрибуты. Элемент похож на кадр в фильме: он отражает состояние интерфейса в конкретный момент времени.
\nПока что, мы знаем только один способ обновить интерфейс — это создать новый элемент и передать его в ReactDOM.render().
Рассмотрим пример с часами:
\nfunction tick() {\n const element = (\n <div>\n <h1>Hello, world!</h1>\n <h2>It is {new Date().toLocaleTimeString()}.</h2>\n </div>\n );\n ReactDOM.render(element, document.getElementById('root'));}\n\nsetInterval(tick, 1000);В этом примере ReactDOM.render() вызывается каждую секунду с помощью колбэка setInterval().
\n\nПримечание:
\nНа практике большинство React-приложений вызывают
\nReactDOM.render()только один раз. В следующем разделе вы узнаете, как можно обновлять интерфейс при помощи компонента с состоянием.Мы рекомендуем не пропускать главы, поскольку каждая следующая глава опирается на знания из предыдущей.
\n
React DOM сравнивает элемент и его дочернее дерево с предыдущей версией и вносит в DOM только минимально необходимые изменения.
\nВы можете убедиться в этом на последнем примере с помощью инструментов разработки в браузере:
\n
Несмотря на то, что мы создаём элемент, описывающий всё UI-дерево, каждую секунду React DOM изменяет только текстовый узел, содержимое которого изменилось.
\nПроще описать, как интерфейс выглядит в конкретный момент, чем как он изменяется с течением времени. По нашему опыту, такой подход позволяет избавиться от целого класса ошибок.
","frontmatter":{"title":"Рендеринг элементов","next":"components-and-props.html","prev":"introducing-jsx.html"},"fields":{"path":"content/docs/rendering-elements.md","slug":"docs/rendering-elements.html"}}},"pageContext":{"slug":"docs/rendering-elements.html"}},"staticQueryHashes":[]}