Element Tree: vad det är, relation med RenderObject och funktionsprincip

Vad är Element Tree i Flutter?

Element Tree är en mellanliggande hierarki i Flutter som skapas baserat på Widget Tree och hanterar inbäddning av widgets i applikationen. Varje elementinstans motsvarar en widget i trädet och lagrar en referens till den. Huvudskillnaden mellan ett element och en widget är att elementet behåller sin position i trädet mellan ombyggnationer, medan widgeten kan återskapas vid varje build-anrop.

Varför Element Tree behövs

Utan Element Tree skulle Flutter inte kunna uppdatera gränssnittet effektivt. Om varje rebuild återskapade RenderObject Tree skulle prestandan vara oacceptabelt låg. Element Tree fungerar som en stabilisator: det bevarar referenser till RenderObject och State mellan uppdateringar, vilket gör att Flutter endast kan tillämpa minimala ändringar på renderingsträdet.

Typer av element

Flutter använder tre huvudtyper av element: StatelessElement för StatelessWidget, StatefulElement för StatefulWidget och LeafRenderObjectElement, SingleChildRenderObjectElement, MultiChildRenderObjectElement för RenderObjectWidget. Varje typ är specialiserad för sin widgetklass och bestämmer hur elementet interagerar med RenderObject.

Relation mellan Widget, Element och RenderObject i trelagersarkitekturen

Trelagersarkitekturen i Flutter består av Widget Tree (konfiguration), Element Tree (hantering) och RenderObject Tree (rendering). Element Tree är den sammanbindande länken: det läser konfiguration från Widget och skickar kommandon till RenderObject. Utan Element Tree skulle ramverket inte effektivt kunna synkronisera den deklarativa beskrivningen med den faktiska renderingen.

Hur ett element kopplar samman widget och RenderObject

När elementet bäddas in i trädet kontrollerar det widgettypen. Om widgeten är en RenderObjectWidget skapar elementet motsvarande RenderObject och lägger till det i RenderObject Tree. Om widgeten är en LeafRenderObjectWidget skapar elementet ett lövet-RenderObject. För StatelessWidget och StatefulWidget hanterar elementet helt enkelt inbäddningen av underordnade element.

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

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

Denna förenklade kod visar den grundläggande strukturen för Element. Varje element lagrar en referens till den aktuella widgeten, förälderelementet och underordnade element. Metoderna mount, update och unmount hanterar elementets livscykel och dess associerade RenderObject.

Elementets livscykel: från skapande till borttagning

Varje element i Flutter genomgår en sekvens av livscykelfaser: skapande, montering, uppdatering och demontering. Förståelse av dessa faser är nödvändig för felsökning av oväntat beteende, särskilt vid arbete med animationer, asynkrona operationer och tillståndshantering.

Fas 1: Skapande av element

Elementet skapas genom att anropa widgetens createElement-metod. För StatelessWidget skapas StatelessElement, för StatefulWidget — StatefulElement (som också skapar State-objektet). För RenderObjectWidget skapas motsvarande RenderObjectElement. Elementets skapande sker när widgeten först visas i Widget Tree.

Fas 2: Montering (mount)

Vid montering läggs elementet till i Element Tree och får förälderelementet. För RenderObjectElement skapar montering också en RenderObject och bäddar in den i RenderObject Tree. Om widgeten är en StatefulWidget anropas i denna fas State-objektets initState-metod.

Fas 3: Uppdatering (update)

När widgeten byggs om med en ny konfiguration tar elementet emot den nya widgeten via update-metoden. Elementet jämför typen av den gamla och nya widgeten: om typerna matchar uppdaterar elementet sin konfiguration; om inte — demonteras elementet och ett nytt skapas. Detta kallas "widget-växling" och är orsaken till tillståndsförlust vid typändring.

Fas 4: Demontering (unmount)

När widgeten tas bort från Widget Tree anropas elementets unmount-metod. Elementet tas bort från Element Tree, RenderObject tas bort från RenderObject Tree och för StatefulWidget anropas State-objektets dispose-metod. Efter unmount kan elementet återanvändas om widgeten dyker upp igen på samma position.

Nycklarnas roll i Element Tree

Nycklar (Key) är en mekanism för identifiering av element som gör att Flutter kan matcha widgets från gamla och nya Widget Tree baserat på unik identifierare istället för position. Nycklar är kritiskt viktiga vid arbete med dynamiska listor där elementens ordning kan ändras: tillägg, borttagning eller omordning av element.

Hur nycklar påverkar Element Tree

Utan nyckel matchar Flutter element baserat på deras position i trädet: elementet på position 0 från det gamla trädet ersätts av widgeten på position 0 från det nya trädet. Om ordningen har ändrats blandas elementen ihop och tillstånd kan gå förlorat eller kopplas till fel data. Nyckeln tvingar Flutter att söka efter elementet baserat på identifierare, inte position.

ValueKey, ObjectKey och UniqueKey

ValueKey använder ett enkelt värde (sträng, tal) för att identifiera elementet. ObjectKey använder en objektreferens — lämplig när elementet inte har en stabil strängidentifierare. UniqueKey genererar en unik identifierare vid varje skapande — används när varje widgetinstans måste vara unik.

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

I detta exempel garanterar ValueKey med item.id att varje TodoItem behåller sitt tillstånd (till exempel fokus på inmatningsfältet) när elementens ordning i listan ändras. Utan nyckel skulle elementet på första positionen ha fått tillståndet från det föregående elementet på samma position.

Hur Element Tree hanterar tillstånd

Tillstånd (State) i Flutter lagras inte i widgets, utan i element. När StatefulWidget byggs om och skapar en ny widgetinstans, behåller motsvarande StatefulElement referensen till det gamla State-objektet. Den nya widgeten kopplas till det befintliga State, vilket gör att data kan bevaras mellan ombyggnationer.

Varför tillstånd inte går förlorat vid rebuild

Vid ombyggnad av widgeten skapar Flutter en ny instans av StatefulWidget, men motsvarande StatefulElement finns kvar i Element Tree. Elementet anropar State-objektets update-metod och skickar den nya widgeten. På så sätt bevaras State-objektet och dess data. Tillståndsförlust sker endast när widgettypen ändras, nyckeln ändras eller elementet tas bort från trädet.

InheritedWidget och Element Tree

InheritedElement är ett speciellt element som gör att underordnade element kan ta emot data från förälderns InheritedWidget utan explicit överföring via konstruktorer. När InheritedWidget ändras meddelar InheritedElement alla beroende element, som byggs om. Denna mekanism ligger till grund för Theme, MediaQuery och Provider.

• Beroende — elementet registrerar sig som beroende av InheritedElement vid anrop av dependOnInheritedWidgetOfExactType.
• Meddelande — när InheritedWidget ändras markerar ramverket alla beroende element som i behov av ombyggnad.
• Ombyggnad — de beroende elementen byggs om i nästa bildruta och uppdaterar gränssnittet enligt den nya datan.

Element Trees påverkan på prestanda

Element Tree förbrukar minne och påverkar hastigheten på första renderingen. Varje element upptar en viss mängd minne: referens till widget, referens till förälder, lista över underordnade element, plats och ytterligare fält för RenderObjectElement. Optimering av Element Tree minskar starttiden och minskar minnesförbrukningen.

Återanvändning av element

Flutter försöker återanvända element vid ombyggnad. Om widgeten i den nya konfigurationen har samma typ och nyckel skapas inte elementet på nytt — det uppdateras. Detta är betydligt snabbare än att skapa ett nytt element med efterföljande montering. Men när typen eller nyckeln ändras demonteras det gamla elementet och ett nytt skapas från grunden.

RepaintBoundary och Element Tree

RepaintBoundary skapar en separat RenderRepaintBoundary i RenderObject Tree som isolerar en del av trädet. På Element Tree-nivå skapar RepaintBoundary inget speciellt element — det använder SingleChildRenderObjectElement. Skillnaden visas på RenderObject-nivå: när innehållet i RepaintBoundary ändras ritas endast det isolerade området om.

Som tabellen visar minskar RepaintBoundary omritningstiden avsevärt genom att isolera det föränderliga området. På Element Tree-nivå krävs ingen ytterligare konfiguration — det räcker att slå in den föränderliga widgeten i RepaintBoundary.