Element Tree: mi ez, kapcsolat a RenderObject-tal és működési elv

Mi az Element Tree a Flutterben?

Element Tree egy köztes hierarchia a Flutterben, amely a Widget Tree alapján jön létre és kezeli a widgetek alkalmazásba való beágyazását. Minden elempéldány egy widgetnek felel meg a fában, és tárol egy referenciát rá. Az elem fő különbsége a widgethez képest, hogy az elem megtartja pozícióját a fában az újraépítések között, míg a widget minden build híváskor újra létrejöhet.

Miért van szükség az Element Tree-re

Element Tree nélkül a Flutter nem tudná hatékonyan frissíteni a felületet. Ha minden rebuild újra létrehozná a RenderObject Tree-t, a teljesítmény elfogadhatatlanul alacsony lenne. Element Tree stabilizátorként működik: megőrzi a RenderObject és State referenciákat a frissítések között, lehetővé téve a Flutter számára, hogy csak minimális változtatásokat alkalmazzon a renderelési fán.

Az elemek típusai

A Flutter három fő elemtípust használ: StatelessElement a StatelessWidget-hez, StatefulElement a StatefulWidget-hez, és LeafRenderObjectElement, SingleChildRenderObjectElement, MultiChildRenderObjectElement a RenderObjectWidget-hez. Minden típus a saját widget osztályára specializálódott, és meghatározza, hogy az elem hogyan kommunikál a RenderObject-tal.

Widget, Element és RenderObject kapcsolata a háromrétegű architektúrában

Háromrétegű architektúra a Flutterben: Widget Tree (konfiguráció), Element Tree (kezelés) és RenderObject Tree (megjelenítés). Az Element Tree az összekötő kapocs: beolvassa a konfigurációt a Widget-ből és parancsokat továbbít a RenderObject-nak. Element Tree nélkül a keretrendszer nem tudná hatékonyan szinkronizálni a deklaratív leírást a tényleges megjelenítéssel.

Hogyan kapcsolja össze az elem a widgetet és a RenderObject-ot

Amikor az elem beágyazódik a fába, ellenőrzi a widget típusát. Ha a widget RenderObjectWidget, az elem létrehozza a megfelelő RenderObject-ot és hozzáadja a RenderObject Tree-hez. Ha a widget LeafRenderObjectWidget, az elem létrehoz egy levél RenderObject-ot. StatelessWidget és StatefulWidget esetén az elem egyszerűen kezeli a gyermekelemek beágyazását.

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

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

Ez az egyszerűsített kód az Element alapvető szerkezetét mutatja. Minden elem tárol egy referenciát az aktuális widgetre, a szülőelemre és a gyermekelemekre. A mount, update és unmount metódusok kezelik az elem és a hozzá tartozó RenderObject életciklusát.

Az elem életciklusa: létrehozástól eltávolításig

Minden elem a Flutterben az életciklus szakaszain megy keresztül: létrehozás, csatolás, frissítés és leválasztás. Ezen szakaszok megértése szükséges a váratlan viselkedés hibakereséséhez, különösen animációkkal, aszinkron műveletekkel és állapotkezeléssel való munka során.

1. szakasz: Az elem létrehozása

Az elem a widget createElement metódusának meghívásával jön létre. StatelessWidget esetén StatelessElement, StatefulWidget esetén StatefulElement (amely létrehozza a State objektumot is) jön létre. RenderObjectWidget esetén a megfelelő RenderObjectElement jön létre. Az elem létrehozása akkor történik, amikor a widget először megjelenik a Widget Tree-ben.

2. szakasz: Csatolás (mount)

Csatoláskor az elem hozzáadódik az Element Tree-hez és megkapja a szülőelemet. RenderObjectElement esetén a csatolás létrehoz egy RenderObject-ot is, és beágyazza a RenderObject Tree-be. Ha a widget StatefulWidget, ebben a szakaszban hívódik meg a State objektum initState metódusa.

3. szakasz: Frissítés (update)

Amikor a widget új konfigurációval épül újra, az elem az update metóduson keresztül kapja meg az új widgetet. Az elem összehasonlítja a régi és új widget típusát: ha a típusok megegyeznek, az elem frissíti a konfigurációját; ha nem — az elem leválasztásra kerül és egy új jön létre. Ezt "widget cserének" hívják, és ez az állapotvesztés oka típusváltáskor.

4. szakasz: Leválasztás (unmount)

Amikor a widget eltűnik a Widget Tree-ből, az elem unmount metódusa hívódik meg. Az elem eltávolításra kerül az Element Tree-ből, a RenderObject eltávolításra kerül a RenderObject Tree-ből, és StatefulWidget esetén a State objektum dispose metódusa hívódik meg. Az unmount után az elem újra felhasználható, ha a widget újra megjelenik ugyanazon a pozíción.

A kulcsok szerepe az Element Tree-ben

Kulcsok (Key) az elemek azonosításának mechanizmusa, amely lehetővé teszi a Flutter számára, hogy a widgeteket a régi és új Widget Tree-ből ne pozíció, hanem egyedi azonosító alapján párosítsa. A kulcsok kritikus fontosságúak dinamikus listákkal való munka során, ahol az elemek sorrendje változhat: elemek hozzáadása, eltávolítása vagy átrendezése.

Hogyan befolyásolják a kulcsok az Element Tree-t

Kulcs nélkül a Flutter az elemeket a pozíciójuk alapján párosítja a fában: a 0. pozíción lévő elem a régi fából a 0. pozíción lévő widgetre cserélődik az új fában. Ha a sorrend megváltozott, az elemek összekeverednek, és az állapot elveszhet vagy rossz adatokhoz kapcsolódhat. A kulcs arra kényszeríti a Flutter-t, hogy az elemet azonosító alapján keresse, ne pozíció alapján.

ValueKey, ObjectKey és UniqueKey

ValueKey egyszerű értéket (string, szám) használ az elem azonosítására. Az ObjectKey objektumreferenciát használ — akkor megfelelő, ha az elemnek nincs stabil string azonosítója. A UniqueKey minden létrehozáskor egyedi azonosítót generál — akkor használatos, ha minden widgetpéldánynak egyedinek kell lennie.

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

Ebben a példában a ValueKey item.id-val garantálja, hogy minden TodoItem megtartja állapotát (például a beviteli mező fókuszát) a lista elemeinek sorrendváltozásakor. Kulcs nélkül az első pozíción lévő elem a korábbi elem állapotát kapta volna ugyanazon a pozíción.

Hogyan kezeli az Element Tree az állapotot

Állapot (State) a Flutterben nem a widgetekben, hanem az elemekben tárolódik. Amikor a StatefulWidget újraépül és létrehoz egy új widgetpéldányt, a megfelelő StatefulElement megtartja a régi State objektum referenciáját. Az új widget a meglévő State-hez kapcsolódik, lehetővé téve az adatok megőrzését az újraépítések között.

Miért nem vész el az állapot rebuild-kor

A widget rebuild-je során a Flutter létrehoz egy új StatefulWidget példányt, de a megfelelő StatefulElement az Element Tree-ben marad. Az elem meghívja a State update metódusát, átadva az új widgetet. Így a State objektum és az adatai megmaradnak. Állapotvesztés csak akkor történik, ha a widget típusa változik, a kulcs változik, vagy az elem eltávolításra kerül a fából.

InheritedWidget és Element Tree

InheritedElement egy speciális elem, amely lehetővé teszi a gyermekelemek számára, hogy adatokat kapjanak a szülő InheritedWidget-tól anélkül, hogy explicit módon átadnák azokat konstruktorokon keresztül. Amikor az InheritedWidget megváltozik, az InheritedElement értesíti az összes függő elemet, amelyek újraépülnek. Ez a mechanizmus áll a Theme, MediaQuery és Provider mögött.

• Függőség — az elem függőként regisztrálja magát az InheritedElement-nél a dependOnInheritedWidgetOfExactType hívásakor.
• Értesítés — amikor az InheritedWidget megváltozik, a keretrendszer az összes függő elemet újraépítendőként jelöli meg.
• Újraépítés — a függő elemek a következő képkockában újraépülnek, frissítve a felhasználói felületet az új adatoknak megfelelően.

Az Element Tree hatása a teljesítményre

Element Tree memóriát fogyaszt és befolyásolja az első megjelenítés sebességét. Minden elem bizonyos mennyiségű memóriát foglal: referenciát a widgetre, referenciát a szülőre, gyermekelemek listája, slot és további mezők a RenderObjectElement számára. Az Element Tree optimalizálása csökkenti az indítási időt és a memóriafogyasztást.

Elemek újrafelhasználása

A Flutter újrafelhasználja az elemeket az újraépítés során. Ha a widget az új konfigurációban azonos típusú és kulcsú, az elem nem jön létre újra — frissítésre kerül. Ez jelentősen gyorsabb, mint egy új elem létrehozása a következő csatolással. Azonban típus vagy kulcs változásakor a régi elem leválasztásra kerül, és egy új jön létre a semmiből.

RepaintBoundary és Element Tree

RepaintBoundary egy külön RenderRepaintBoundary-t hoz létre a RenderObject Tree-ben, amely elkülöníti a fa egy részét. Az Element Tree szintjén a RepaintBoundary nem hoz létre speciális elemet — SingleChildRenderObjectElement-et használ. A különbség a RenderObject szintjén mutatkozik meg: amikor a RepaintBoundary tartalma megváltozik, csak az elkülönített terület rajzolódik újra.

Ahogy a táblázat mutatja, a RepaintBoundary jelentősen csökkenti az újrarajzolási időt a változó terület elkülönítésével. Az Element Tree szintjén ez nem igényel további konfigurációt — elég a változó widgetet RepaintBoundary-be csomagolni.