Бібліотека React
Last updated
Last updated
React – бібліотека для створення елементів інтерфейсу користувача.
Ця бібліотека із додатковими модулями дозволяє вирішити будь-які завдання розробки.
При написанні додатку за допомогою бібліотеки React ми безпосередньо не взаємодіємо з DOM-деревом. Інтерфейс описують за допомогою компонентів (шаблонів). А змінюють його за допомогою моделі. Якщо змінити дані моделі, то бібліотека React сама перемалює інтерфейс.
Бібліотеку React можна використовувати для розробки різних мультиплатформних сервісів.
Приклади використання React на різних платформах:
- для написання застосунків, які рендеряться на сервері
- для написання нативних мобільних додатків
- для написання десктопних застосунків
DOM - Об'єктна модель документа (англ. Document Object Model).
Browser DOM – деревоподібне представлення HTML-документа. Тут кожен елемент представлений у вигляді DOM-вузла. Це дерево безпосередньо представляє те, що ми бачимо в браузері на сторінці.
Коли змінюється DOM браузера, то виконуються складні операції з оновлення, це сповільнює систему і потрібні способи ефективнішого оновлення.
Virtual DOM – це абстракція. Це легка копія реального DOM-дерева у вигляді JSON-документа.
Особливості Virtual DOM:
Зберігається у пам'яті та не рендериться в браузері
Не залежить від внутрішньої імплементації браузера
Використовує найкращі практики оновлення реального DOM
Збирає оновлення в групи для оптимізації рендерингу (batching)
У React кожен елемент інтерфейсу – це компонент. Компонент може залежати тільки від пропсів і стану. Коли відбувається зміна компонента (змінюється пропс або стан), то створюється нове віртуальне DOM-дерево. Після цього React (breadth-first алгоритм) порівнює віртуальне і реальне DOM-дерево і перемальовує (оновлює) тільки ті компоненти в яких відбулись зміни.
На зображенні вище оновлюються лише гілки зеленого кольору. Порівнюються зміни та обчислюється спосіб найоптимальнішого оновлення реального DOM-дерева.
Покликання:
