❄️ Что такое DOM-дерево?

Document Object Model (DOM) — это структура, представляющая HTML-документ в виде дерева. 🌳
Браузер использует DOM для отображения страницы и взаимодействия с ней через JavaScript.

💡 DOM позволяет:
➖Управлять HTML-разметкой из JavaScript, делая веб-страницы динамическими.
➖Обновлять элементы на странице без её перезагрузки.

❗️Недостатки DOM:
- При каждом изменении браузер пересчитывает стили, перерисовывает элементы и перерабатывает макет страницы.
- Частые обновления DOM могут замедлять работу приложения 🐌

❔Что такое виртуальный DOM?

Это высокоуровневое облегченное представление реального DOM, который используется для оптимизации обновлений.

🛠 Как работает VDOM в React?

1️⃣ React сначала обновляет виртуальный DOM, не изменяя реальный.
2️⃣ Затем он сравнивает новый VDOM с предыдущей версией (процесс diffing).
3️⃣ React определяет минимальный набор изменений и применяет их к реальному DOM (reconciliation), обновляя только измененные элементы.

❄️ Fiber

Новый механизм согласования (reconciliation) в React 16, основная цель которого сделать рендеринг виртуального DOM инкрементным.

🔥 Основные преимущества Fiber:

1️⃣ Разбивает обновления на мелкие части, делая рендеринг более плавным.
2️⃣ Позволяет приостанавливать и возобновлять работу, не блокируя основной поток браузера.
3️⃣ Улучшает производительность анимаций и сложных интерфейсов.

#React