Skip to main content

Як життєвий цикл пов'язаний з Virtual DOM?

ReactJunior~2 хв читання
Запропонувати правку

Ключова ідея

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
  1. Оновлення (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
  1. Розмонтування
  • React видаляє Virtual DOM вузол Counter.
  • Видаляє елемент <button> з DOM.
  • Викликає cleanup() з useEffect.
javascript
unmount -> cleanup -> remove DOM

Зв'язок з Render і Commit phases

ФазаРобота з Virtual DOMЖиттєвий цикл
Render phaseReact перестворює Virtual DOM (у пам'яті)render() компонента, читання state, обчислення JSX
Commit phaseReact оновлює реальний DOM, ґрунтуючись на diffuseLayoutEffect, useEffect, componentDidMount, componentDidUpdate, cleanup

Ключова думка

Virtual DOM - це "робоча область", де React вирішує, що потрібно змінити. Життєвий цикл - це "часова шкала" того, коли ці зміни відбуваються і коли ти можеш втрутитися в цей процес.

Візуально

javascript
(state змінився) ↓ ┌──────────────┐ │ Render phase │ ← будуємо нове Virtual DOM └──────────────┘ ↓ порівнюємо з попереднім (diffing) ↓ ┌──────────────┐ │ Commit phase │ ← оновлюємо реальний DOM └──────────────┘ ↓ викликаємо useEffect()

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку