Element Tree: ce este, legătura cu RenderObject și principiul de funcționare

Ce este Element Tree în Flutter?

Element Tree este ierarhia intermediară din Flutter, creată pe baza Widget Tree, care gestionează încorporarea widgeturilor în aplicație. Fiecare instanță a elementului corespunde unui widget din arbore și stochează o referință la el. Principala diferență dintre element și widget este că elementul își păstrează poziția în arbore între reconstrucții, în timp ce widgetul poate fi recreat la fiecare apel build.

De ce este necesar Element Tree

Fără Element Tree, Flutter nu ar putea actualiza eficient interfața. Dacă fiecare rebuild ar recrea RenderObject Tree, performanța ar fi inacceptabil de scăzută. Element Tree acționează ca un stabilizator: păstrează referințele către RenderObject și State între actualizări, permițând Flutter să aplice doar modificări minime arborelui de randare.

Tipuri de elemente

Flutter utilizează trei tipuri principale de elemente: StatelessElement pentru StatelessWidget, StatefulElement pentru StatefulWidget și LeafRenderObjectElement, SingleChildRenderObjectElement, MultiChildRenderObjectElement pentru RenderObjectWidget. Fiecare tip este specializat pentru clasa sa de widgeturi și determină modul în care elementul interacționează cu RenderObject.

Legătura Widget, Element și RenderObject în arhitectura cu trei straturi

Arhitectura cu trei straturi a Flutter constă din Widget Tree (configurare), Element Tree (gestionare) și RenderObject Tree (randare). Element Tree este veriga de legătură: citește configurarea din Widget și transmite comenzi către RenderObject. Fără Element Tree, frameworkul nu ar putea sincroniza eficient descrierea declarativă cu randarea efectivă.

Cum leagă elementul widgetul și RenderObject

Când elementul este încorporat în arbore, verifică tipul widgetului. Dacă widgetul este un RenderObjectWidget, elementul creează RenderObject-ul corespunzător și îl adaugă în RenderObject Tree. Dacă widgetul este un LeafRenderObjectWidget, elementul creează un RenderObject de tip frunză. Pentru StatelessWidget și StatefulWidget, elementul doar gestionează încorporarea elementelor copil.

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

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

Acest cod simplificat arată structura de bază a Element. Fiecare element păstrează referința la widgetul curent, elementul părinte și elementele copil. Metodele mount și update gestionează ciclul de viață al elementului și al RenderObject asociat.

Ciclul de viață al elementului: de la creare la ștergere

Fiecare element din Flutter trece printr-o succesiune de etape ale ciclului de viață: creare, montare, actualizare și demontare. Înțelegerea acestor etape este necesară pentru depanarea comportamentului neașteptat, în special la lucrul cu animații, operații asincrone și gestionarea stării.

Etapa 1: Crearea elementului

Elementul este creat prin apelarea metodei createElement a widgetului. Pentru StatelessWidget se creează StatelessElement, pentru StatefulWidget — StatefulElement (care creează și obiectul State). Pentru RenderObjectWidget se creează RenderObjectElement-ul corespunzător. Crearea elementului are loc la prima apariție a widgetului în Widget Tree.

Etapa 2: Montarea (mount)

La montare, elementul este adăugat în Element Tree și primește elementul părinte. Pentru RenderObjectElement, montarea creează și un RenderObject și îl încorporează în RenderObject Tree. Dacă widgetul este un StatefulWidget, în această etapă se apelează metoda initState a obiectului State.

Etapa 3: Actualizarea (update)

Când widgetul este reconstruit cu o configurare nouă, elementul primește un widget nou prin metoda update. Elementul compară tipul noului și vechiului widget: dacă tipurile coincid, elementul își actualizează configurarea; dacă nu — elementul este demontat și se creează unul nou. Aceasta se numește „schimbarea widgetului" și este cauza pierderii stării la schimbarea tipului.

Etapa 4: Demontarea (unmount)

La ștergerea widgetului din Widget Tree, pe element este apelată metoda unmount. Elementul este eliminat din Element Tree, RenderObject este eliminat din RenderObject Tree, iar pentru StatefulWidget se apelează metoda dispose a obiectului State. După unmount, elementul poate fi reutilizat dacă widgetul apare din nou în aceeași poziție.

Rolul cheilor în Element Tree

Cheile (Key) sunt mecanismul de identificare a elementelor care permite Flutter să potrivească widgeturile din Widget Tree vechi și nou nu după poziție, ci după un identificator unic. Cheile sunt critice la lucrul cu liste dinamice, unde ordinea elementelor se poate schimba: adăugarea, ștergerea sau rearanjarea elementelor.

Cum influențează cheile Element Tree

Fără cheie, Flutter potrivește elementele după poziția lor în arbore: elementul de pe poziția 0 din arborele vechi este înlocuit de widgetul de pe poziția 0 din arborele nou. Dacă ordinea s-a schimbat, elementele se încurcă, iar starea poate fi pierdută sau legată de date greșite. Cheia forțează Flutter să caute elementul după identificator, nu după poziție.

ValueKey, ObjectKey și UniqueKey

ValueKey folosește o valoare simplă (șir de caractere, număr) pentru identificarea elementului. ObjectKey folosește referința la un obiect — potrivit atunci când elementul nu are un identificator șir stabil. UniqueKey generează un identificator unic la fiecare creare — se folosește atunci când fiecare instanță a widgetului trebuie să fie unică.

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

În acest exemplu, ValueKey cu item.id garantează că fiecare TodoItem își păstrează starea (de exemplu, focusul câmpului de introducere) la schimbarea ordinii elementelor în listă. Fără cheie, elementul de pe prima poziție ar primi starea elementului anterior de pe aceeași poziție.

Cum gestionează Element Tree starea

Starea (State) în Flutter nu este stocată în widgeturi, ci în elemente. Când StatefulWidget este reconstruit și creează o nouă instanță a widgetului, StatefulElement-ul corespunzător păstrează referința la vechiul obiect State. Noul widget se leagă de State-ul existent, permițând păstrarea datelor între reconstrucții.

De ce starea nu se pierde la rebuild

La rebuild-ul widgetului, Flutter creează o nouă instanță a StatefulWidget, dar StatefulElement-ul corespunzător rămâne în Element Tree. Elementul apelează metoda update pe State, transmițând noul widget. Astfel, obiectul State și datele sale se păstrează. Pierderea stării are loc doar la schimbarea tipului widgetului, la modificarea cheii sau la ștergerea elementului din arbore.

InheritedWidget și Element Tree

InheritedElement este un element special care permite elementelor copil să primească date de la InheritedWidget-ul părinte fără transmiterea explicită prin constructori. Când InheritedWidget se schimbă, InheritedElement notifică toate elementele dependente, care sunt reconstruite. Acest mecanism stă la baza Theme, MediaQuery și Provider.

• Dependența — elementul se înregistrează ca dependent de InheritedElement la apelarea dependOnInheritedWidgetOfExactType.
• Notificarea — la schimbarea InheritedWidget, frameworkul marchează toate elementele dependente ca necesitând reconstrucție.
• Reconstrucția — elementele dependente sunt reconstruite în cadrul următor, actualizând UI conform noilor date.

Influența Element Tree asupra performanței

Element Tree consumă memorie și influențează viteza primului randare. Fiecare element ocupă o anumită cantitate de memorie: referința la widget, referința la părinte, lista elementelor copil, slotul și câmpuri suplimentare pentru RenderObjectElement. Optimizarea Element Tree reduce timpul de pornire și scade consumul de memorie.

Reutilizarea elementelor

Flutter încearcă să reutilizeze elementele la reconstrucție. Dacă widgetul din noua configurare are același tip și aceeași cheie, elementul nu este creat din nou — este actualizat. Aceasta este mult mai rapid decât crearea unui element nou cu montarea ulterioară. Însă la schimbarea tipului sau a cheii, elementul vechi este demontat, iar cel nou este creat de la zero.

RepaintBoundary și Element Tree

RepaintBoundary creează un RenderRepaintBoundary separat în RenderObject Tree, care izolează o parte a arborelui. La nivelul Element Tree, RepaintBoundary nu creează un element special — folosește SingleChildRenderObjectElement. Diferența se manifestă la nivelul RenderObject: la schimbarea conținutului, doar zona izolată a RepaintBoundary este redesenată.

După cum arată tabelul, RepaintBoundary reduce semnificativ timpul de redesenare prin izolarea zonei modificabile. La nivelul Element Tree aceasta nu necesită configurare suplimentară — este suficient să înfășurați widgetul modificabil în RepaintBoundary.