Element Tree: що це, зв'язок з RenderObject та принцип роботи

Що таке Element Tree у Flutter?

Element Tree — це проміжна ієрархія у Flutter, яка створюється на основі Widget Tree та керує вбудовуванням віджетів у додаток. Кожен екземпляр елемента відповідає одному віджету в дереві та зберігає посилання на нього. Головна відмінність елемента від віджета — елемент зберігає своє положення в дереві між перебудовами, тоді як віджет може бути перестворений при кожному виклику build.

Навіщо потрібен Element Tree

Без Element Tree Flutter не міг би ефективно оновлювати інтерфейс. Якби кожен rebuild перестворював RenderObject Tree, продуктивність була б неприйнятно низькою. Element Tree виступає в ролі стабілізатора: він зберігає посилання на RenderObject та State між оновленнями, дозволяючи Flutter застосовувати лише мінімальні зміни до дерева відтворення.

Типи елементів

Flutter використовує три основних типи елементів: StatelessElement для StatelessWidget, StatefulElement для StatefulWidget та LeafRenderObjectElement, SingleChildRenderObjectElement, MultiChildRenderObjectElement для RenderObjectWidget. Кожен тип спеціалізований для свого класу віджетів і визначає, як елемент взаємодіє з RenderObject.

Зв'язок Widget, Element та RenderObject у тришаровій архітектурі

Тришарова архітектура Flutter складається з Widget Tree (конфігурація), Element Tree (керування) та RenderObject Tree (відтворення). Element Tree є сполучною ланкою: він читає конфігурацію з Widget та передає команди RenderObject. Без Element Tree фреймворк не міг би ефективно синхронізувати декларативний опис з фактичним відтворенням.

Як елемент пов'язує віджет та RenderObject

Коли елемент вбудовується в дерево, він перевіряє тип віджета. Якщо віджет є RenderObjectWidget, елемент створює відповідний RenderObject і додає його в RenderObject Tree. Якщо віджет є LeafRenderObjectWidget, елемент створює листовий RenderObject. Для StatelessWidget та StatefulWidget елемент просто керує вбудовуванням дочірніх елементів.

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

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

Цей спрощений код показує базову структуру Element. Кожен елемент зберігає посилання на поточний віджет, батьківський елемент та дочірні елементи. Методи mount, update та unmount керують життєвим циклом елемента та пов'язаного з ним RenderObject.

Життєвий цикл елемента: від створення до видалення

Кожен елемент у Flutter проходить послідовність етапів життєвого циклу: створення, монтування, оновлення та демонтування. Розуміння цих етапів необхідне для налагодження неочікуваної поведінки, особливо при роботі з анімаціями, асинхронними операціями та управлінням станом.

Етап 1: Створення елемента

Елемент створюється викликом методу createElement віджета. Для StatelessWidget створюється StatelessElement, для StatefulWidget — StatefulElement (який також створює об'єкт State). Для RenderObjectWidget створюється відповідний RenderObjectElement. Створення елемента відбувається при першій появі віджета в Widget Tree.

Етап 2: Монтування (mount)

При монтуванні елемент додається в Element Tree та отримує батьківський елемент. Для RenderObjectElement монтування також створює RenderObject і вбудовує його в RenderObject Tree. Якщо віджет є StatefulWidget, на цьому етапі викликається метод initState об'єкта State.

Етап 3: Оновлення (update)

Коли віджет перебудовується з новою конфігурацією, елемент отримує новий віджет через метод update. Елемент порівнює тип старого та нового віджета: якщо типи збігаються, елемент оновлює свою конфігурацію; якщо ні — елемент демонтується та створюється новий. Це називається "зміною віджета" і є причиною втрати стану при зміні типу.

Етап 4: Демонтування (unmount)

При видаленні віджета з Widget Tree викликається метод unmount елемента. Елемент видаляється з Element Tree, RenderObject видаляється з RenderObject Tree, а для StatefulWidget викликається метод dispose об'єкта State. Після unmount елемент може бути перевикористаний, якщо віджет з'явиться знову в тій самій позиції.

Роль ключів у Element Tree

Ключі (Key) — це механізм ідентифікації елементів, який дозволяє Flutter зіставляти віджети зі старого та нового Widget Tree не за позицією, а за унікальним ідентифікатором. Ключі критично важливі при роботі з динамічними списками, де порядок елементів може змінюватися: додавання, видалення або перестановка елементів.

Як ключі впливають на Element Tree

Без ключа Flutter зіставляє елементи за їхньою позицією в дереві: елемент на позиції 0 зі старого дерева замінюється віджетом на позиції 0 з нового дерева. Якщо порядок змінився, елементи переплутуються, і стан може бути втрачений або прив'язаний до неправильних даних. Ключ змушує Flutter шукати елемент за ідентифікатором, а не за позицією.

ValueKey, ObjectKey та UniqueKey

ValueKey використовує просте значення (рядок, число) для ідентифікації елемента. ObjectKey використовує посилання на об'єкт — підходить, коли в елемента немає стабільного рядкового ідентифікатора. UniqueKey генерує унікальний ідентифікатор при кожному створенні — використовується, коли кожен екземпляр віджета має бути унікальним.

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

У цьому прикладі ValueKey з item.id гарантує, що кожен TodoItem збереже свій стан (наприклад, фокус поля введення) при зміні порядку елементів у списку. Без ключа елемент на першій позиції отримав би стан попереднього елемента на тій самій позиції.

Як Element Tree керує станом

Стан (State) у Flutter зберігається не у віджетах, а в елементах. Коли StatefulWidget перебудовується та створює новий екземпляр віджета, відповідний StatefulElement зберігає посилання на старий об'єкт State. Новий віджет зв'язується з існуючим State, що дозволяє зберігати дані між перебудовами.

Чому стан не втрачається при rebuild

При перебудові віджета Flutter створює новий екземпляр StatefulWidget, але відповідний StatefulElement залишається в Element Tree. Елемент викликає метод update у State, передаючи новий віджет. Таким чином, об'єкт State та його дані зберігаються. Втрата стану відбувається лише при зміні типу віджета, зміні ключа або видаленні елемента з дерева.

InheritedWidget та Element Tree

InheritedElement — це спеціальний елемент, який дозволяє дочірнім елементам отримувати дані від батьківського InheritedWidget без явної передачі через конструктори. Коли InheritedWidget змінюється, InheritedElement сповіщає всі залежні елементи, які перебудовуються. Цей механізм лежить в основі Theme, MediaQuery та Provider.

• Залежність — елемент реєструється як залежний від InheritedElement при виклику dependOnInheritedWidgetOfExactType.
• Сповіщення — при зміні InheritedWidget фреймворк позначає всі залежні елементи як такі, що потребують перебудови.
• Перебудова — залежні елементи перебудовуються в наступному кадрі, оновлюючи UI відповідно до нових даних.

Вплив Element Tree на продуктивність

Element Tree споживає пам'ять і впливає на швидкість першого рендерингу. Кожен елемент займає певний обсяг пам'яті: посилання на віджет, посилання на батька, список дочірніх елементів, слот та додаткові поля для RenderObjectElement. Оптимізація Element Tree знижує час запуску та зменшує споживання пам'яті.

Перевикористання елементів

Flutter намагається перевикористовувати елементи при перебудові. Якщо віджет у новій конфігурації має той самий тип та ключ, елемент не створюється заново — він оновлюється. Це значно швидше, ніж створення нового елемента з подальшим монтуванням. Однак при зміні типу або ключа старий елемент демонтується, а новий створюється з нуля.

RepaintBoundary та Element Tree

RepaintBoundary створює окремий RenderRepaintBoundary в RenderObject Tree, який ізолює частину дерева. На рівні Element Tree RepaintBoundary не створює спеціального елемента — він використовує SingleChildRenderObjectElement. Різниця проявляється на рівні RenderObject: при зміні вмісту RepaintBoundary перемальовується лише ізольована область.

Як показує таблиця, RepaintBoundary суттєво скорочує час перемальовування за рахунок ізоляції змінної області. На рівні Element Tree це не вимагає додаткової конфігурації — достатньо обернути змінний віджет у RepaintBoundary.