React.js російською мовою. Частина третя



Переклад офіційної документації бібліотеки React.js російською мовою.

Зміст:
1 — Частина перша
2 — Частина друга
2 — Частина третя

Вивід елементів
Елементи є самими дрібними компонентами програми. Елемент описує те, що ви хочете побачити на екрані:

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

На відміну від DOM-елементів браузера, елементи React є простими об'єктами, які створюються простіше. React DOM постійно стежить за оновленням елементів в DOM.

Примітка:

Елементи можна переплутати з більш широким поняттям, таким як «компоненти». У наступному розділі ми вивчимо компоненти. Елементи є будівельним матеріалом для компонентів і перш, ніж рухатися далі, ми радимо вам ознайомитися з цим розділом.
Відображення елемента в DOM
Давайте припустимо, що у вашому HTML файлі знаходиться div:

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

Ми назвемо це кореневим вузлом DOM, оскільки все, що знаходиться всередині нього, буде управлятися React DOM. Додатки, створені за допомогою React, зазвичай мають один кореневий вузол DOM. Якщо ви інтегруєте React у вже створений додаток, ви можете мати стільки ізольованих кореневих вузлів, скільки побажаєте.

Для відображення елемента React на кореневому сайті DOM, виконайте ReactDOM.render():

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

Спробуйте повторити цей приклад CodePen. Привітання «Hello World» відображається на сторінці.

Оновлення відображуваних елементів
Елементи React є незмінними (immutable). Після того, як ви створили елемент, ви не можете змінити його дочірні модулі або атрибути. Елемент можна порівняти з кадром в кіно: він являє собою інтерфейс в певний момент часу.

Володіючи самими новітніми знаннями програмування, єдиним способом оновити UI є створення нового елемента і його передача в ReactDOM.render().

Зверніться до даного прикладу:

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

Спробуйте повторити цей приклад CodePen. ReactDOM.render() реагує кожну секунду на сигнал від setInterval()

Примітка:

На практиці, більшість React додатків передають сигнал в ReactDOM.render() тільки один раз. У наступних розділах ми дізнаємося як такий код інкапсулюється в структуровані компоненти.

Рекомендуємо Вам не пропускати блоки інформації, оскільки вони взаємопов'язані.

React оновлює тільки те, що необхідно

React DOM порівнює елементи та їх дочірні модулі з попередніми і дозволяє оновлювати DOM тільки тоді, коли необхідно оновити до потрібного стану.

Ви можете переконатися в цьому на наступному прикладі:


Навіть якщо ми створимо елемент, що описує всі дерево UI на кожному твк, тільки текстовий вузол, чиє утримання змінилося, буде оновлюватися React DOMом.

Спираючись на наш досвід, роздуми про те, як має виглядати дерево UI в певний момент часу замість роздумів про те, як його поміняти з часом, позбавляє нас від цілого ряду помилок.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.