![\"DOM-інспектор](\"/c158617ed7cc0eac8f58330e49e48224/granular-dom-updates.gif\")
Елементи — це найменші будівельні блоки React-додатку.
\nЕлемент описує те, що ви хочете бачити на екрані:
\nconst element = <h1>Привіт, світе</h1>;На відміну від DOM-елементів, елементи React — звичайні об’єкти, легкі для створення. React DOM бере на себе оновлення DOM для його відповідності React-елементам.
\n\n\nПримітка:
\nМожна сплутати елементи з більш загальновідомою концепцією “компонентів”. Ми представимо компоненти в наступному розділі. Елементи — це те, з чого “зроблені” компоненти, перш ніж рухатись далі, ми рекомендуємо вам ознайомитись з цим розділом.
\n
Припустимо, що у вашому HTML файлі існує <div>:
<div id=\"root\"></div>Ми називаємо його “кореневим” DOM вузлом, тому що все всередині нього буде керуватись за допомогою React DOM.
\nДодатки, створені за допомогою самого лише React, зазвичай мають лише один кореневий вузол DOM. Якщо ви інтегруєте React в існуючий додаток — ви можете мати будь-яку кількість ізольованих кореневих DOM вузлів.
\nДля рендерингу React-елементу в кореневому DOM вузлі, викличте функцію ReactDOM.render() з React-елементом та кореневим DOM вузлом у якості аргументів:
const element = <h1>Hello, world</h1>;\nReactDOM.render(element, document.getElementById('root'));На сторінці відобразиться “Hello, world”.
\nReact-елементи є незмінними. Як тільки елемент створений, ви не можете змінювати його дочірні елементи чи атрибути. Елемент схожий на кадр із фільму: він відображає інтерфейс користувача в певний момент часу.
\nЗ нашими поточними знаннями, єдиний спосіб оновити інтерфейс користувача — створити новий елемент і передати його в ReactDOM.render().
Розглянемо наступний приклад годинника:
\nfunction tick() {\n const element = (\n <div>\n <h1>Hello, world!</h1>\n <h2>Зараз {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 тільки необхідні зміни для приведення DOM у бажаний стан.
\nВи можете пересвідчитись в цьому, перевіривши останній приклад за допомогою інструментів браузера:
\n
Не дивлячись на те, що ми створили елемент, який щосекундно описує структуру дерева інтерфейсу користувача, лише текстовий вузол, вміст якого змінився, оновлюється за допомогою 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":[]}