Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як життєвий цикл пов'язаний з Virtual DOM?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Virtual DOM** - це основа, на якій React реалізує життєвий цикл компонента: він будує віртуальне дерево, порівнює нову й стару версії (reconciliation), обчислює мінімальний набір змін і застосовує їх до реального DOM у commit phase. **Ключове:** усі події життєвого циклу відбуваються навколо цих дій - render phase перебудовує Virtual DOM, а commit phase оновлює реальний DOM і викликає ефекти.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Ключова ідея > **Virtual DOM - це основа**, на якій React реалізує **життєвий цикл компонента.** React не працює напряму з реальним DOM при кожній зміні. Натомість: 1. Будує **віртуальне дерево (Virtual DOM)** - JS-об'єкти, що описують структуру інтерфейсу. 2. При зміні стану (`state`, `props`) React створює **нову версію віртуального дерева**. 3. Порівнює її зі старою версією (процес **reconciliation**). 4. Обчислює **мінімальний набір змін**, які потрібно застосувати до реального DOM. 5. Застосовує їх у **commit phase**. І всі події **життєвого циклу** відбуваються *навколо* цих дій. --- ## Як Virtual DOM пов'язаний з фазами життєвого циклу Ось зв'язок поетапно: | Етап | Що робить React з Virtual DOM | Які методи / хуки викликаються | |---|---|---| | **Монтування (mount)** | React створює **перше віртуальне дерево** на основі JSX-компонентів | `useEffect` (після коміту), `useLayoutEffect`, `componentDidMount` | | **Оновлення (update)** | React створює **нове віртуальне дерево**, порівнює його зі старим -> знаходить відмінності (diffing) | `useEffect` (cleanup + новий), `useLayoutEffect`, `componentDidUpdate` | | **Розмонтування (unmount)** | React видаляє вузол з віртуального дерева -> видаляє відповідні DOM-елементи | cleanup-функції в `useEffect`, `componentWillUnmount` | --- ## Приклад: крок за кроком ```javascript function Counter() { const [count, setCount] = useState(0); useEffect(() => { console.log('effect'); return () => console.log('cleanup'); }); return <button onClick={() => setCount(c => c + 1)}>{count}</button>; } ``` 1. **Монтування** - React викликає `Counter()` -> створює Virtual DOM для `<button>0</button>`. - Порівнювати поки нема з чим -> створює DOM-елемент `<button>`. - Після коміту викликає `useEffect()`. ```javascript render -> diff -> commit -> useEffect ``` 2. **Оновлення (**`setCount`**)** - React знову викликає `Counter()` -> нове Virtual DOM: `<button>1</button>`. - Порівнює старе (`<button>0</button>`) з новим (`<button>1</button>`) -> бачить різницю в тексті. - Змінює тільки текст у DOM. - Викликає cleanup старого ефекту -> потім новий `useEffect`. ```javascript render -> diff -> minimal DOM update -> cleanup -> new useEffect ``` 3. **Розмонтування** - React видаляє Virtual DOM вузол `Counter`. - Видаляє елемент `<button>` з DOM. - Викликає `cleanup()` з `useEffect`. ```javascript unmount -> cleanup -> remove DOM ``` --- ## Зв'язок з Render і Commit phases | Фаза | Робота з Virtual DOM | Життєвий цикл | |---|---|---| | **Render phase** | React перестворює Virtual DOM (у пам'яті) | `render()` компонента, читання state, обчислення JSX | | **Commit phase** | React оновлює реальний DOM, ґрунтуючись на diff | `useLayoutEffect`, `useEffect`, `componentDidMount`, `componentDidUpdate`, cleanup | --- ## Ключова думка > Virtual DOM - це "робоча область", де React вирішує, **що потрібно змінити**. > Життєвий цикл - це "часова шкала" того, **коли** ці зміни відбуваються і **коли ти можеш втрутитися** в цей процес. --- ## Візуально ```javascript (state змінився) ↓ ┌──────────────┐ │ Render phase │ ← будуємо нове Virtual DOM └──────────────┘ ↓ порівнюємо з попереднім (diffing) ↓ ┌──────────────┐ │ Commit phase │ ← оновлюємо реальний DOM └──────────────┘ ↓ викликаємо useEffect() ```Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.