Przejdź do głównej zawartości
Codex13

01. Wirtualny DOM i reconciliation

O czym jest ta prezentacja?

Dział zatytułowany „O czym jest ta prezentacja?”

Wirtualny DOM i reconciliation

React nie manipuluje prawdziwym DOM bezpośrednio. Zamiast tego tworzy wirtualną reprezentację drzewa DOM w pamięci, porównuje ją z poprzednią wersją (algorytm diff) i dopiero minimalne zmiany aplikuje do prawdziwego DOM. Ten mechanizm to reconciliation.

Kluczowe pytania do odpowiedzi

Dział zatytułowany „Kluczowe pytania do odpowiedzi”
  1. Co to jest Virtual DOM? — Lekka, JavaScript-owa kopia prawdziwego drzewa DOM
  2. Jak działa algorytm diff? — Porównanie nowego i poprzedniego Virtual DOM, O(n) heurystyki
  3. Co to jest reconciliation? — Proces stosowania minimalnych zmian do prawdziwego DOM
  4. Dlaczego prop key jest ważny? — Pomaga Reactowi identyfikować elementy list podczas diff

Zakres merytoryczny

Dział zatytułowany „Zakres merytoryczny”

Elementy obowiązkowe

Dział zatytułowany „Elementy obowiązkowe”
  1. Definicja Virtual DOM — czym jest i po co istnieje
  2. Prawdziwy DOM vs Virtual DOM — porównanie wydajności, dlaczego bezpośrednie mutacje są kosztowne
  3. Algorytm diff — jak React porównuje drzewa (heurystyki: typ elementu, klucz)
  4. Reconciliation — jak minimalne zmiany trafiają do prawdziwego DOM (Fiber)
  5. Prop key — przykład z listą komponentów, co się dzieje bez klucza

Wymagane elementy wizualne

Dział zatytułowany „Wymagane elementy wizualne”

Schemat

Narysujcie drzewo: Stan początkowy → Virtual DOM v1 → Zmiana stanu → Virtual DOM v2 → Diff → Patch na prawdziwym DOM. Pokaż które węzły są aktualizowane (zaznaczone), a które pozostają niezmienione.

Przykład kodu JSX

Lista elementów BEZ klucza (błąd) vs z kluczem (poprawnie). Pokaż jak React traci ślad elementów bez key.

Warianty realizacji

Dział zatytułowany „Warianty realizacji”

Zawartość:

  • Co to jest Virtual DOM i dlaczego React go używa
  • Schemat: prawdziwy DOM vs Virtual DOM
  • Przykład JSX z listą i kluczami (key)
  • Podsumowanie: 3 kluczowe punkty

Forma: 10 slajdów, 10 minut prezentacji

Ocena: 3.0

Scenariusze i przykłady

Dział zatytułowany „Scenariusze i przykłady”

Przykład 1 — Lista bez klucza (błąd)

Dział zatytułowany „Przykład 1 — Lista bez klucza (błąd)”
// ŹLE: React nie wie który element to który
function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li>{todo.text}</li>  // Brak key!
      ))}
    </ul>
  );
}

Przykład 2 — Lista z kluczem (poprawnie)

Dział zatytułowany „Przykład 2 — Lista z kluczem (poprawnie)”
// DOBRZE: React może śledzić każdy element
function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>  // key = stabilne ID
      ))}
    </ul>
  );
}

Przykład 3 — Jak reconciliation minimalizuje zmiany DOM

Dział zatytułowany „Przykład 3 — Jak reconciliation minimalizuje zmiany DOM”
// React renderuje tylko to co się zmieniło
function Counter() {
  const [count, setCount] = useState(0);


  return (
    <div>
      <h1>Licznik</h1>           {/* Nie zmienia się — nie zostanie zaktualizowany w DOM */}
      <p>Wartość: {count}</p>    {/* Zmienia się — tylko ten węzeł zostanie zaktualizowany */}
      <button onClick={() => setCount(c => c + 1)}>
        Zwiększ
      </button>
    </div>
  );
}

Wskazówki do wystąpienia

Dział zatytułowany „Wskazówki do wystąpienia”

Użyj analogii

Wirtualny DOM to jak szkic architekta przed budową — najpierw rysujesz zmiany na papierze, zatem wiesz dokładnie co przebudować, zamiast burzyć i stawiać wszystko od nowa.

Pokaż problem, który rozwiązuje

Zacznij od: “Wyobraźcie sobie, że zmiana jednego elementu na liście 1000 pozycji wymaga odmalowania całej strony…” — to właśnie problem, który Virtual DOM rozwiązuje.

Slajd z diff wizualnie

Narysujcie dwa drzewa obok siebie — stare i nowe. Zaznaczcie kolorami które węzły są zmienione (czerwony), dodane (zielony), usunięte (szary). To najlepsza wizualizacja algorytmu diff.

Q&A — przygotujcie się na

“Co się stanie jeśli użyjemy indeksu tablicy jako key?” — Odpowiedź: działa, ale może powodować błędy przy dodawaniu/usuwaniu elementów z początku listy.

Zasoby

Dział zatytułowany „Zasoby”
React — Reconciliation Oficjalna dokumentacja algorytmu diff i reconciliation.
React — Lista i klucze Jak poprawnie renderować listy w React.
Fizeau — React Fiber Arch Techniczny opis architektury React Fiber.

Do dzieła!

Dział zatytułowany „Do dzieła!”

Macie świetny temat!

Wirtualny DOM to fundament Reacta — zrozumienie go wyróżni Was jako deweloperów. Po tej prezentacji klasa będzie wiedzieć DLACZEGO React jest szybki. Przygotujcie dobry schemat i będziecie gwiazdami!