Element Tree: ano ito, ugnayan sa RenderObject at prinsipyo ng paggana

Ano ang Element Tree sa Flutter?

Element Tree ay isang intermediate hierarchy sa Flutter na nilikha batay sa Widget Tree at namamahala sa pag-embed ng mga widget sa application. Bawat instance ng elemento ay tumutugma sa isang widget sa puno at nag-iimbak ng referens dito. Ang pangunahing pagkakaiba ng elemento sa widget ay ang elemento ay nagpapanatili ng posisyon nito sa puno sa pagitan ng mga muling pagtatayo, samantalang ang widget ay maaaring muling likhain sa bawat tawag ng build.

Bakit kailangan ang Element Tree

Kung wala ang Element Tree, hindi epektibong maa-update ng Flutter ang interface. Kung ang bawat rebuild ay muling lilikha ng RenderObject Tree, ang performance ay hindi katanggap-tanggap na mababa. Element Tree ay nagsisilbing stabilizer: ito ay nag-iimbak ng mga referens sa RenderObject at State sa pagitan ng mga update, na nagpapahintulot sa Flutter na mag-apply lamang ng minimal na pagbabago sa render tree.

Mga uri ng elemento

Gumagamit ang Flutter ng tatlong pangunahing uri ng elemento: StatelessElement para sa StatelessWidget, StatefulElement para sa StatefulWidget, at LeafRenderObjectElement, SingleChildRenderObjectElement, MultiChildRenderObjectElement para sa RenderObjectWidget. Bawat uri ay espesyalisado para sa klase ng widget nito at tinutukoy kung paano nakikipag-ugnayan ang elemento sa RenderObject.

Ugnayan ng Widget, Element at RenderObject sa three-layer architecture

Three-layer architecture ng Flutter ay binubuo ng Widget Tree (configuration), Element Tree (pamamahala), at RenderObject Tree (pag-render). Ang Element Tree ay ang nag-uugnay: binabasa nito ang configuration mula sa Widget at ipinapasa ang mga utos sa RenderObject. Kung wala ang Element Tree, hindi epektibong mai-synchronize ng framework ang declarative na paglalarawan sa aktwal na pag-render.

Paano iniuugnay ng elemento ang widget at RenderObject

Kapag ang elemento ay na-embed sa puno, sinusuri nito ang uri ng widget. Kung ang widget ay isang RenderObjectWidget, ang elemento ay lumilikha ng kaukulang RenderObject at idinaragdag ito sa RenderObject Tree. Kung ang widget ay LeafRenderObjectWidget, ang elemento ay lumilikha ng leaf RenderObject. Para sa StatelessWidget at StatefulWidget, ang elemento ay namamahala lamang sa pag-embed ng mga child element.

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

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

Ang pinasimpleng code na ito ay nagpapakita ng pangunahing istraktura ng Element. Bawat elemento ay nag-iimbak ng referens sa kasalukuyang widget, parent element, at mga child element. Ang mga pamamaraang mount, update, at unmount ay namamahala sa lifecycle ng elemento at ng kaugnay na RenderObject nito.

Lifecycle ng elemento: mula sa paglikha hanggang sa pagtanggal

Bawat elemento sa Flutter ay dumadaan sa sunod-sunod na yugto ng lifecycle: paglikha, pag-mount, pag-update, at pag-unmount. Ang pag-unawa sa mga yugtong ito ay kinakailangan para sa pag-debug ng hindi inaasahang pag-uugali, lalo na sa paggawa gamit ang mga animation, asynchronous operations, at pamamahala ng estado.

Yugto 1: Paglikha ng elemento

Ang elemento ay nilikha sa pamamagitan ng pagtawag sa createElement method ng widget. Para sa StatelessWidget, nilikha ang StatelessElement; para sa StatefulWidget, nilikha ang StatefulElement (na lumilikha din ng State object). Para sa RenderObjectWidget, nilikha ang kaukulang RenderObjectElement. Ang paglikha ng elemento ay nangyayari kapag unang lumitaw ang widget sa Widget Tree.

Yugto 2: Pag-mount (mount)

Sa pag-mount, ang elemento ay idinaragdag sa Element Tree at tumatanggap ng parent element. Para sa RenderObjectElement, ang pag-mount ay lumilikha din ng RenderObject at ini-embed ito sa RenderObject Tree. Kung ang widget ay StatefulWidget, sa yugtong ito ay tinatawag ang initState method ng State object.

Yugto 3: Pag-update (update)

Kapag ang widget ay muling itinayo na may bagong configuration, ang elemento ay tumatanggap ng bagong widget sa pamamagitan ng update method. Inihahambing ng elemento ang uri ng luma at bagong widget: kung magkatugma ang mga uri, ina-update ng elemento ang configuration nito; kung hindi — ang elemento ay ina-unmount at isang bago ay nilikha. Ito ay tinatawag na "widget swap" at ang dahilan ng pagkawala ng estado kapag nagbago ang uri.

Yugto 4: Pag-unmount (unmount)

Kapag ang widget ay tinanggal mula sa Widget Tree, ang unmount method ng elemento ay tinatawag. Ang elemento ay tinanggal mula sa Element Tree, ang RenderObject ay tinanggal mula sa RenderObject Tree, at para sa StatefulWidget, ang dispose method ng State object ay tinatawag. Pagkatapos ng unmount, ang elemento ay maaaring magamit muli kung ang widget ay lumitaw muli sa parehong posisyon.

Tungkulin ng mga key sa Element Tree

Mga Key ay mekanismo ng pagkilala ng elemento na nagpapahintulot sa Flutter na itugma ang mga widget mula sa luma at bagong Widget Tree hindi ayon sa posisyon, kundi ayon sa natatanging identifier. Ang mga key ay kritikal na mahalaga sa paggawa gamit ang dynamic na listahan kung saan maaaring magbago ang pagkakasunod-sunod ng mga elemento: pagdaragdag, pagtanggal, o pag-aayos muli ng mga elemento.

Paano naaapektuhan ng mga key ang Element Tree

Kung walang key, itinutugma ng Flutter ang mga elemento ayon sa kanilang posisyon sa puno: ang elemento sa posisyon 0 mula sa lumang puno ay pinapalitan ng widget sa posisyon 0 mula sa bagong puno. Kung nagbago ang pagkakasunod-sunod, nagkakahalo ang mga elemento at ang estado ay maaaring mawala o maiugnay sa maling data. Pinipilit ng key ang Flutter na hanapin ang elemento ayon sa identifier, hindi ayon sa posisyon.

ValueKey, ObjectKey at UniqueKey

ValueKey ay gumagamit ng simpleng value (string, numero) para kilalanin ang elemento. Ang ObjectKey ay gumagamit ng referens sa object — angkop kapag ang elemento ay walang stable na string identifier. Ang UniqueKey ay lumilikha ng natatanging identifier sa bawat paglikha — ginagamit kapag ang bawat instance ng widget ay dapat na natatangi.

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

Sa halimbawang ito, ValueKey na may item.id ay ginagarantiyahan na ang bawat TodoItem ay nagpapanatili ng estado nito (halimbawa, focus ng input field) kapag nagbago ang pagkakasunod-sunod ng mga elemento sa listahan. Kung walang key, ang elemento sa unang posisyon ay makakakuha ng estado ng nakaraang elemento sa parehong posisyon.

Paano pinamamahalaan ng Element Tree ang estado

Estado (State) sa Flutter ay hindi naka-imbak sa mga widget, kundi sa mga elemento. Kapag ang StatefulWidget ay muling itinayo at lumilikha ng bagong instance ng widget, ang kaukulang StatefulElement ay nagpapanatili ng referens sa lumang State object. Ang bagong widget ay kumokonekta sa umiiral na State, na nagpapahintulot sa data na manatili sa pagitan ng mga muling pagtatayo.

Bakit hindi nawawala ang estado sa rebuild

Sa rebuild ng widget, lumilikha ang Flutter ng bagong instance ng StatefulWidget, ngunit ang kaukulang StatefulElement ay nananatili sa Element Tree. Tinatawag ng elemento ang update method ng State, na nagpapasa ng bagong widget. Sa ganitong paraan, ang State object at data nito ay nananatili. Ang pagkawala ng estado ay nangyayari lamang kapag nagbago ang uri ng widget, nagbago ang key, o ang elemento ay tinanggal mula sa puno.

InheritedWidget at Element Tree

InheritedElement ay isang espesyal na elemento na nagpapahintulot sa mga child element na makatanggap ng data mula sa parent InheritedWidget nang walang explicit na pagpasa sa pamamagitan ng mga constructor. Kapag nagbago ang InheritedWidget, ipinaaalam ng InheritedElement sa lahat ng dependent element, na muling itinatayo. Ang mekanismong ito ay nasa pundasyon ng Theme, MediaQuery, at Provider.

• Dependency — ang elemento ay nagrerehistro bilang dependent sa InheritedElement sa pagtawag ng dependOnInheritedWidgetOfExactType.
• Abiso — kapag nagbago ang InheritedWidget, minamarkahan ng framework ang lahat ng dependent element bilang nangangailangan ng muling pagtatayo.
• Muling pagtatayo — ang mga dependent element ay muling itinatayo sa susunod na frame, ina-update ang UI ayon sa bagong data.

Epekto ng Element Tree sa performance

Element Tree ay kumokonsumo ng memorya at nakakaapekto sa bilis ng unang pag-render. Bawat elemento ay sumasakop ng tiyak na dami ng memorya: referens sa widget, referens sa parent, listahan ng mga child element, slot, at karagdagang field para sa RenderObjectElement. Ang pag-optimize ng Element Tree ay nagbabawas ng oras ng pagsisimula at nagpapababa ng konsumo ng memorya.

Paggamit muli ng mga elemento

Sinusubukan ng Flutter na gamitin muli ang mga elemento sa muling pagtatayo. Kung ang widget sa bagong configuration ay may parehong uri at key, ang elemento ay hindi muling nililikha — ito ay ina-update. Ito ay mas mabilis kaysa paglikha ng bagong elemento na may kasunod na pag-mount. Gayunpaman, kapag nagbago ang uri o key, ang lumang elemento ay ina-unmount at isang bago ay nilikha mula sa simula.

RepaintBoundary at Element Tree

RepaintBoundary ay lumilikha ng hiwalay na RenderRepaintBoundary sa RenderObject Tree na naghihiwalay ng bahagi ng puno. Sa antas ng Element Tree, ang RepaintBoundary ay hindi lumilikha ng espesyal na elemento — ito ay gumagamit ng SingleChildRenderObjectElement. Ang pagkakaiba ay makikita sa antas ng RenderObject: kapag nagbago ang nilalaman ng RepaintBoundary, tanging ang isolated na lugar ang muling iginuguhit.

Tulad ng ipinapakita ng talahanayan, RepaintBoundary ay makabuluhang nagbabawas ng oras ng muling pagguhit sa pamamagitan ng paghihiwalay ng nagbabagong lugar. Sa antas ng Element Tree, hindi ito nangangailangan ng karagdagang configuration — sapat na balutin ang nagbabagong widget sa RepaintBoundary.