Element Tree: co to jest, związek z RenderObject i zasada działania

Co to jest Element Tree we Flutter?

Element Tree to hierarchia pośrednia we Flutter, która jest tworzona na podstawie Widget Tree i zarządza osadzaniem widgetów w aplikacji. Każda instancja elementu odpowiada jednemu widgetowi w drzewie i przechowuje do niego referencję. Główna różnica między elementem a widgetem polega na tym, że element zachowuje swoje położenie w drzewie między przebudowaniami, natomiast widget może być odtworzony przy każdym wywołaniu build.

Po co jest Element Tree

Bez Element Tree Flutter nie mógłby efektywnie aktualizować interfejsu. Gdyby każde przebudowanie odtwarzało RenderObject Tree, wydajność byłaby niedopuszczalnie niska. Element Tree pełni rolę stabilizatora: zachowuje referencje do RenderObject i State między aktualizacjami, pozwalając Flutter stosować tylko minimalne zmiany w drzewie renderowania.

Typy elementów

Flutter używa trzech głównych typów elementów: StatelessElement dla StatelessWidget, StatefulElement dla StatefulWidget oraz LeafRenderObjectElement, SingleChildRenderObjectElement, MultiChildRenderObjectElement dla RenderObjectWidget. Każdy typ jest specjalizowany dla swojej klasy widgetów i określa, jak element współdziała z RenderObject.

Związek Widget, Element i RenderObject w architekturze trójwarstwowej

Architektura trójwarstwowa Flutter składa się z Widget Tree (konfiguracja), Element Tree (zarządzanie) i RenderObject Tree (renderowanie). Element Tree jest ogniwem łączącym: odczytuje konfigurację z Widget i przekazuje polecenia do RenderObject. Bez Element Tree framework nie mógłby skutecznie synchronizować deklaratywnego opisu z faktycznym renderowaniem.

Jak element łączy widget i RenderObject

Gdy element zostaje osadzony w drzewie, sprawdza typ widgetu. Jeśli widget jest RenderObjectWidget, element tworzy odpowiedni RenderObject i dodaje go do RenderObject Tree. Jeśli widget jest LeafRenderObjectWidget, element tworzy liściowy RenderObject. Dla StatelessWidget i StatefulWidget element po prostu zarządza osadzaniem elementów potomnych.

abstract class Element {
  Widget widget;
  Element? parent;
  List<Element>? children;

  void mount(Element? parent, dynamic newSlot);
  void update(Widget newWidget);
  void unmount();
}

Ten uproszczony kod pokazuje podstawową strukturę Element. Każdy element przechowuje referencję do bieżącego widgetu, elementu nadrzędnego i elementów potomnych. Metody mount i update zarządzają cyklem życia elementu oraz związanego z nim RenderObject.

Cykl życia elementu: od utworzenia do usunięcia

Każdy element we Flutter przechodzi przez sekwencję etapów cyklu życia: utworzenie, montowanie, aktualizację i demontowanie. Zrozumienie tych etapów jest niezbędne do debugowania nieoczekiwanego zachowania, zwłaszcza podczas pracy z animacjami, operacjami asynchronicznymi i zarządzaniem stanem.

Etap 1: Utworzenie elementu

Element jest tworzony przez wywołanie metody createElement widgetu. Dla StatelessWidget tworzony jest StatelessElement, dla StatefulWidget — StatefulElement (który również tworzy obiekt State). Dla RenderObjectWidget tworzony jest odpowiedni RenderObjectElement. Utworzenie elementu następuje przy pierwszym pojawieniu się widgetu w Widget Tree.

Etap 2: Montowanie (mount)

Podczas montowania element jest dodawany do Element Tree i otrzymuje element nadrzędny. Dla RenderObjectElement montowanie tworzy również RenderObject i osadza go w RenderObject Tree. Jeśli widget jest StatefulWidget, na tym etapie wywoływana jest metoda initState obiektu State.

Etap 3: Aktualizacja (update)

Gdy widget jest przebudowywany z nową konfiguracją, element otrzymuje nowy widget przez metodę update. Element porównuje typ nowego i starego widgetu: jeśli typy są zgodne, element aktualizuje swoją konfigurację; jeśli nie — element jest demontowany i tworzony jest nowy. Nazywa się to „zmianą widgetu" i jest przyczyną utraty stanu przy zmianie typu.

Etap 4: Demontowanie (unmount)

Po usunięciu widgetu z Widget Tree na elemencie wywoływana jest metoda unmount. Element jest usuwany z Element Tree, RenderObject jest usuwany z RenderObject Tree, a dla StatefulWidget wywoływana jest metoda dispose obiektu State. Po unmount element może zostać ponownie wykorzystany, jeśli widget pojawi się ponownie w tej samej pozycji.

Rola kluczy w Element Tree

Klucze (Key) to mechanizm identyfikacji elementów, który pozwala Flutter dopasowywać widgety ze starego i nowego Widget Tree nie według pozycji, ale według unikalnego identyfikatora. Klucze są krytycznie ważne podczas pracy z dynamicznymi listami, w których kolejność elementów może się zmieniać: dodawanie, usuwanie lub przestawianie elementów.

Jak klucze wpływają na Element Tree

Bez klucza Flutter dopasowuje elementy według ich pozycji w drzewie: element na pozycji 0 ze starego drzewa jest zastępowany widgetem na pozycji 0 z nowego drzewa. Jeśli kolejność się zmieniła, elementy zostają poprzestawiane, a stan może zostać utracony lub powiązany z nieprawidłowymi danymi. Klucz zmusza Flutter do wyszukiwania elementu według identyfikatora, a nie według pozycji.

ValueKey, ObjectKey i UniqueKey

ValueKey używa prostej wartości (ciągu znaków, liczby) do identyfikacji elementu. ObjectKey używa referencji do obiektu — sprawdza się, gdy element nie ma stabilnego identyfikatora w postaci ciągu znaków. UniqueKey generuje unikalny identyfikator przy każdym utworzeniu — używany, gdy każda instancja widgetu musi być unikalna.

Column(
  children: items.map((item) => TodoItem(
    key: ValueKey(item.id),
    title: item.title,
    isDone: item.isDone,
  )).toList(),
)

W tym przykładzie ValueKey z item.id gwarantuje, że każdy TodoItem zachowa swój stan (na przykład fokus pola wejściowego) przy zmianie kolejności elementów na liście. Bez klucza element na pierwszej pozycji otrzymałby stan poprzedniego elementu na tej samej pozycji.

Jak Element Tree zarządza stanem

Stan (State) we Flutter jest przechowywany nie w widgetach, ale w elementach. Gdy StatefulWidget jest przebudowywany i tworzy nową instancję widgetu, odpowiedni StatefulElement zachowuje referencję do starego obiektu State. Nowy widget łączy się z istniejącym State, co pozwala zachować dane między przebudowaniami.

Dlaczego stan nie jest tracony przy przebudowie

Podczas przebudowy widgetu Flutter tworzy nową instancję StatefulWidget, ale odpowiedni StatefulElement pozostaje w Element Tree. Element wywołuje metodę update w State, przekazując nowy widget. W ten sposób obiekt State i jego dane są zachowywane. Utrata stanu następuje tylko przy zmianie typu widgetu, zmianie klucza lub usunięciu elementu z drzewa.

InheritedWidget i Element Tree

InheritedElement to specjalny element, który pozwala elementom potomnym otrzymywać dane od nadrzędnego InheritedWidget bez jawnego przekazywania przez konstruktory. Gdy InheritedWidget się zmienia, InheritedElement powiadamia wszystkie zależne elementy, które są przebudowywane. Ten mechanizm leży u podstaw Theme, MediaQuery i Provider.

• Zależność — element rejestruje się jako zależny od InheritedElement przy wywołaniu dependOnInheritedWidgetOfExactType.
• Powiadomienie — przy zmianie InheritedWidget framework oznacza wszystkie zależne elementy jako wymagające przebudowy.
• Przebudowa — zależne elementy są przebudowywane w następnej klatce, aktualizując UI zgodnie z nowymi danymi.

Wpływ Element Tree na wydajność

Element Tree zużywa pamięć i wpływa na szybkość pierwszego renderowania. Każdy element zajmuje określoną ilość pamięci: referencja do widgetu, referencja do rodzica, lista elementów potomnych, slot oraz dodatkowe pola dla RenderObjectElement. Optymalizacja Element Tree skraca czas uruchamiania i zmniejsza zużycie pamięci.

Ponowne wykorzystanie elementów

Flutter stara się ponownie wykorzystywać elementy podczas przebudowy. Jeśli widget w nowej konfiguracji ma ten sam typ i klucz, element nie jest tworzony od nowa — jest aktualizowany. Jest to znacznie szybsze niż tworzenie nowego elementu z późniejszym montowaniem. Jednak przy zmianie typu lub klucza stary element jest demontowany, a nowy tworzony od zera.

RepaintBoundary i Element Tree

RepaintBoundary tworzy osobny RenderRepaintBoundary w RenderObject Tree, który izoluje część drzewa. Na poziomie Element Tree RepaintBoundary nie tworzy specjalnego elementu — używa SingleChildRenderObjectElement. Różnica przejawia się na poziomie RenderObject: przy zmianie zawartości RepaintBoundary jest przemalowywany tylko izolowany obszar.

Jak pokazuje tabela, RepaintBoundary znacznie skraca czas przemalowania dzięki izolacji zmienianego obszaru. Na poziomie Element Tree nie wymaga to dodatkowej konfiguracji — wystarczy owinąć zmieniany widget w RepaintBoundary.