Element Tree: wat het is, relatie met RenderObject en werkingsprincipe

Wat is Element Tree in Flutter?

Element Tree is een tussenliggende hiërarchie in Flutter die wordt gemaakt op basis van de Widget Tree en de inbedding van widgets in de applicatie beheert. Elk elementexemplaar komt overeen met één widget in de boom en slaat een verwijzing ernaar op. Het belangrijkste verschil tussen een element en een widget is dat het element zijn positie in de boom behoudt tussen herbouwbeurten, terwijl de widget bij elke build-aanroep opnieuw kan worden aangemaakt.

Waarom Element Tree nodig is

Zonder Element Tree zou Flutter de interface niet efficiënt kunnen bijwerken. Als elke rebuild de RenderObject Tree opnieuw zou aanmaken, zou de prestatie onaanvaardbaar laag zijn. Element Tree fungeert als stabilisator: het bewaart verwijzingen naar RenderObject en State tussen updates, waardoor Flutter slechts minimale wijzigingen aan de renderboom kan toepassen.

Typen elementen

Flutter gebruikt drie hoofdtypen elementen: StatelessElement voor StatelessWidget, StatefulElement voor StatefulWidget en LeafRenderObjectElement, SingleChildRenderObjectElement, MultiChildRenderObjectElement voor RenderObjectWidget. Elk type is gespecialiseerd voor zijn widgetklasse en bepaalt hoe het element met RenderObject interageert.

Verband tussen Widget, Element en RenderObject in de drielaagsarchitectuur

Drielaagsarchitectuur van Flutter bestaat uit Widget Tree (configuratie), Element Tree (beheer) en RenderObject Tree (weergave). De Element Tree is de verbindende schakel: hij leest configuratie uit Widget en geeft opdrachten door aan RenderObject. Zonder Element Tree zou het framework de declaratieve beschrijving niet efficiënt kunnen synchroniseren met de daadwerkelijke weergave.

Hoe een element widget en RenderObject verbindt

Wanneer een element in de boom wordt ingebed, controleert het het widgettype. Als de widget een RenderObjectWidget is, maakt het element de bijbehorende RenderObject aan en voegt deze toe aan de RenderObject Tree. Als de widget een LeafRenderObjectWidget is, maakt het element een blad-RenderObject aan. Voor StatelessWidget en StatefulWidget beheert het element eenvoudigweg de inbedding van onderliggende elementen.

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

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

Deze vereenvoudigde code toont de basisstructuur van Element. Elk element slaat een verwijzing op naar de huidige widget, het ouderelement en de onderliggende elementen. De methoden mount, update en unmount beheren de levenscyclus van het element en de bijbehorende RenderObject.

Levenscyclus van een element: van creatie tot verwijdering

Elk element in Flutter doorloopt een opeenvolging van levenscyclusfasen: creatie, montage, update en demontage. Begrip van deze fasen is noodzakelijk voor het debuggen van onverwacht gedrag, vooral bij het werken met animaties, asynchrone bewerkingen en statusbeheer.

Fase 1: Elementcreatie

Het element wordt aangemaakt door de methode createElement van de widget aan te roepen. Voor StatelessWidget wordt StatelessElement aangemaakt, voor StatefulWidget — StatefulElement (dat ook het State-object aanmaakt). Voor RenderObjectWidget wordt de bijbehorende RenderObjectElement aangemaakt. Elementcreatie vindt plaats wanneer de widget voor het eerst in de Widget Tree verschijnt.

Fase 2: Montage (mount)

Bij montage wordt het element aan de Element Tree toegevoegd en ontvangt het het ouderelement. Voor RenderObjectElement creëert montage ook een RenderObject en voegt deze in in de RenderObject Tree. Als de widget een StatefulWidget is, wordt in deze fase de methode initState van het State-object aangeroepen.

Fase 3: Update (update)

Wanneer de widget met een nieuwe configuratie wordt herbouwd, ontvangt het element de nieuwe widget via de methode update. Het element vergelijkt het type van de oude en nieuwe widget: als de typen overeenkomen, werkt het element zijn configuratie bij; zo niet — wordt het element gedemonteerd en een nieuw aangemaakt. Dit wordt "widgetwisseling" genoemd en is de oorzaak van statusverlies bij typewijziging.

Fase 4: Demontage (unmount)

Wanneer de widget uit de Widget Tree wordt verwijderd, wordt de methode unmount van het element aangeroepen. Het element wordt uit de Element Tree verwijderd, de RenderObject wordt uit de RenderObject Tree verwijderd en voor StatefulWidget wordt de methode dispose van het State-object aangeroepen. Na unmount kan het element opnieuw worden gebruikt als de widget weer op dezelfde positie verschijnt.

Rol van sleutels in Element Tree

Sleutels (Key) zijn een identificatiemechanisme voor elementen waarmee Flutter widgets uit de oude en nieuwe Widget Tree kan matchen op basis van een unieke identificatie in plaats van positie. Sleutels zijn cruciaal bij het werken met dynamische lijsten waar de volgorde van elementen kan veranderen: toevoegen, verwijderen of herschikken van elementen.

Hoe sleutels de Element Tree beïnvloeden

Zonder sleutel matcht Flutter elementen op hun positie in de boom: het element op positie 0 uit de oude boom wordt vervangen door de widget op positie 0 uit de nieuwe boom. Als de volgorde is veranderd, raken elementen door elkaar en kan status verloren gaan of aan verkeerde gegevens worden gekoppeld. De sleutel dwingt Flutter om het element te zoeken op identificatie in plaats van op positie.

ValueKey, ObjectKey en UniqueKey

ValueKey gebruikt een eenvoudige waarde (string, getal) om het element te identificeren. ObjectKey gebruikt een verwijzing naar een object — geschikt wanneer het element geen stabiele string-identificatie heeft. UniqueKey genereert een unieke identificatie bij elke aanmaak — wordt gebruikt wanneer elk widgetexemplaar uniek moet zijn.

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

In dit voorbeeld garandeert ValueKey met item.id dat elke TodoItem zijn status behoudt (bijvoorbeeld focus van het invoerveld) bij wijziging van de volgorde van elementen in de lijst. Zonder sleutel zou het element op de eerste positie de status van het vorige element op dezelfde positie hebben gekregen.

Hoe Element Tree de status beheert

Status (State) wordt in Flutter niet opgeslagen in widgets, maar in elementen. Wanneer StatefulWidget herbouwd wordt en een nieuw widgetexemplaar aanmaakt, behoudt de bijbehorende StatefulElement de verwijzing naar het oude State-object. De nieuwe widget wordt gekoppeld aan de bestaande State, waardoor gegevens tussen herbouwbeurten behouden blijven.

Waarom status niet verloren gaat bij rebuild

Bij rebuild van de widget maakt Flutter een nieuw exemplaar van StatefulWidget aan, maar de bijbehorende StatefulElement blijft in de Element Tree. Het element roept de methode update van State aan en geeft de nieuwe widget door. Zo blijven het State-object en zijn gegevens behouden. Statusverlies treedt alleen op bij wijziging van widgettype, verandering van sleutel of verwijdering van het element uit de boom.

InheritedWidget en Element Tree

InheritedElement is een speciaal element waarmee onderliggende elementen gegevens van de bovenliggende InheritedWidget kunnen verkrijgen zonder expliciete overdracht via constructors. Wanneer InheritedWidget verandert, stelt InheritedElement alle afhankelijke elementen op de hoogte, die herbouwd worden. Dit mechanisme vormt de basis van Theme, MediaQuery en Provider.

• Afhankelijkheid — het element registreert zich als afhankelijk van InheritedElement bij aanroep van dependOnInheritedWidgetOfExactType.
• Melding — bij wijziging van InheritedWidget markeert het framework alle afhankelijke elementen als herbouwbehoeftig.
• Herbouw — afhankelijke elementen worden herbouwd in het volgende frame en werken de UI bij volgens de nieuwe gegevens.

Invloed van Element Tree op prestaties

Element Tree verbruikt geheugen en beïnvloedt de snelheid van de eerste weergave. Elk element neemt een bepaalde hoeveelheid geheugen in beslag: verwijzing naar widget, verwijzing naar ouder, lijst van onderliggende elementen, sleuf en extra velden voor RenderObjectElement. Optimalisatie van de Element Tree verkort de opstarttijd en vermindert het geheugengebruik.

Hergebruik van elementen

Flutter probeert elementen bij herbouw opnieuw te gebruiken. Als de widget in de nieuwe configuratie hetzelfde type en dezelfde sleutel heeft, wordt het element niet opnieuw aangemaakt — het wordt bijgewerkt. Dit is aanzienlijk sneller dan het aanmaken van een nieuw element met daaropvolgende montage. Bij type- of sleutelwijziging wordt het oude element echter gedemonteerd en een nieuwe vanaf nul aangemaakt.

RepaintBoundary en Element Tree

RepaintBoundary creëert een aparte RenderRepaintBoundary in de RenderObject Tree die een deel van de boom isoleert. Op het niveau van de Element Tree creëert RepaintBoundary geen speciaal element — het gebruikt SingleChildRenderObjectElement. Het verschil manifesteert zich op het niveau van RenderObject: bij wijziging van de inhoud van RepaintBoundary wordt alleen het geïsoleerde gebied opnieuw getekend.

Zoals de tabel laat zien, verkort RepaintBoundary de herteken tijd aanzienlijk door het wijzigende gebied te isoleren. Op het niveau van de Element Tree is geen extra configuratie nodig — het volstaat om de veranderlijke widget in RepaintBoundary te wikkelen.