Element Tree: apa itu, hubungan dengan RenderObject dan prinsip kerja

Apa itu Element Tree di Flutter?

Element Tree adalah hierarki perantara di Flutter yang dibuat berdasarkan Widget Tree dan mengelola penyisipan widget ke dalam aplikasi. Setiap instance elemen sesuai dengan satu widget di pohon dan menyimpan referensi ke widget tersebut. Perbedaan utama antara elemen dan widget adalah elemen mempertahankan posisinya di pohon di antara pembangunan ulang, sedangkan widget dapat dibuat ulang pada setiap panggilan build.

Mengapa Element Tree diperlukan

Tanpa Element Tree, Flutter tidak dapat memperbarui antarmuka secara efisien. Jika setiap rebuild membuat ulang RenderObject Tree, kinerja akan sangat rendah. Element Tree bertindak sebagai stabilisator: ia menyimpan referensi ke RenderObject dan State di antara pembaruan, memungkinkan Flutter menerapkan hanya perubahan minimal pada pohon render.

Jenis elemen

Flutter menggunakan tiga jenis elemen utama: StatelessElement untuk StatelessWidget, StatefulElement untuk StatefulWidget, dan LeafRenderObjectElement, SingleChildRenderObjectElement, MultiChildRenderObjectElement untuk RenderObjectWidget. Setiap jenis dikhususkan untuk kelas widgetnya dan menentukan bagaimana elemen berinteraksi dengan RenderObject.

Hubungan Widget, Element dan RenderObject dalam arsitektur tiga lapis

Arsitektur tiga lapis Flutter terdiri dari Widget Tree (konfigurasi), Element Tree (manajemen), dan RenderObject Tree (rendering). Element Tree adalah penghubung: ia membaca konfigurasi dari Widget dan meneruskan perintah ke RenderObject. Tanpa Element Tree, framework tidak dapat menyinkronkan deskripsi deklaratif dengan rendering aktual secara efisien.

Bagaimana elemen menghubungkan widget dan RenderObject

Ketika elemen disisipkan ke dalam pohon, ia memeriksa tipe widget. Jika widget adalah RenderObjectWidget, elemen membuat RenderObject yang sesuai dan menambahkannya ke RenderObject Tree. Jika widget adalah LeafRenderObjectWidget, elemen membuat RenderObject daun. Untuk StatelessWidget dan StatefulWidget, elemen hanya mengelola penyisipan elemen anak.

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

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

Kode yang disederhanakan ini menunjukkan struktur dasar Element. Setiap elemen menyimpan referensi ke widget saat ini, elemen induk, dan elemen anak. Metode mount, update, dan unmount mengelola siklus hidup elemen dan RenderObject yang terkait.

Siklus hidup elemen: dari pembuatan hingga penghapusan

Setiap elemen di Flutter melalui serangkaian tahap siklus hidup: pembuatan, pemasangan, pembaruan, dan pelepasan. Pemahaman tentang tahap-tahap ini diperlukan untuk debugging perilaku tidak terduga, terutama saat bekerja dengan animasi, operasi asinkron, dan manajemen status.

Tahap 1: Pembuatan elemen

Elemen dibuat dengan memanggil metode createElement dari widget. Untuk StatelessWidget, dibuat StatelessElement; untuk StatefulWidget, dibuat StatefulElement (yang juga membuat objek State). Untuk RenderObjectWidget, dibuat RenderObjectElement yang sesuai. Pembuatan elemen terjadi saat widget pertama kali muncul di Widget Tree.

Tahap 2: Pemasangan (mount)

Saat pemasangan, elemen ditambahkan ke Element Tree dan menerima elemen induk. Untuk RenderObjectElement, pemasangan juga membuat RenderObject dan menyisipkannya ke RenderObject Tree. Jika widget adalah StatefulWidget, pada tahap ini metode initState dari objek State dipanggil.

Tahap 3: Pembaruan (update)

Ketika widget dibangun ulang dengan konfigurasi baru, elemen menerima widget baru melalui metode update. Elemen membandingkan tipe widget lama dan baru: jika tipenya cocok, elemen memperbarui konfigurasinya; jika tidak — elemen dilepas dan yang baru dibuat. Ini disebut "pergantian widget" dan merupakan penyebab hilangnya status saat perubahan tipe.

Tahap 4: Pelepasan (unmount)

Ketika widget dihapus dari Widget Tree, metode unmount elemen dipanggil. Elemen dihapus dari Element Tree, RenderObject dihapus dari RenderObject Tree, dan untuk StatefulWidget, metode dispose dari objek State dipanggil. Setelah unmount, elemen dapat digunakan kembali jika widget muncul lagi di posisi yang sama.

Peran kunci dalam Element Tree

Kunci (Key) adalah mekanisme identifikasi elemen yang memungkinkan Flutter mencocokkan widget dari Widget Tree lama dan baru bukan berdasarkan posisi, melainkan berdasarkan pengenal unik. Kunci sangat penting saat bekerja dengan daftar dinamis di mana urutan elemen dapat berubah: penambahan, penghapusan, atau pengaturan ulang elemen.

Bagaimana kunci mempengaruhi Element Tree

Tanpa kunci, Flutter mencocokkan elemen berdasarkan posisi mereka di pohon: elemen pada posisi 0 dari pohon lama diganti dengan widget pada posisi 0 dari pohon baru. Jika urutan berubah, elemen menjadi kacau dan status dapat hilang atau terikat pada data yang salah. Kunci memaksa Flutter untuk mencari elemen berdasarkan pengenal, bukan posisi.

ValueKey, ObjectKey dan UniqueKey

ValueKey menggunakan nilai sederhana (string, angka) untuk mengidentifikasi elemen. ObjectKey menggunakan referensi objek — cocok ketika elemen tidak memiliki pengenal string yang stabil. UniqueKey menghasilkan pengenal unik pada setiap pembuatan — digunakan ketika setiap instance widget harus unik.

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

Dalam contoh ini, ValueKey dengan item.id memastikan bahwa setiap TodoItem mempertahankan statusnya (misalnya, fokus bidang input) saat urutan elemen dalam daftar berubah. Tanpa kunci, elemen pada posisi pertama akan mendapatkan status elemen sebelumnya pada posisi yang sama.

Bagaimana Element Tree mengelola status

Status (State) di Flutter tidak disimpan di widget, melainkan di elemen. Ketika StatefulWidget dibangun ulang dan membuat instance widget baru, StatefulElement yang sesuai mempertahankan referensi ke objek State lama. Widget baru terhubung dengan State yang ada, memungkinkan data tetap dipertahankan di antara pembangunan ulang.

Mengapa status tidak hilang saat rebuild

Saat rebuild widget, Flutter membuat instance baru StatefulWidget, tetapi StatefulElement yang sesuai tetap berada di Element Tree. Elemen memanggil metode update pada State, meneruskan widget baru. Dengan demikian, objek State dan datanya tetap dipertahankan. Kehilangan status hanya terjadi ketika tipe widget berubah, kunci berubah, atau elemen dihapus dari pohon.

InheritedWidget dan Element Tree

InheritedElement adalah elemen khusus yang memungkinkan elemen anak menerima data dari InheritedWidget induk tanpa pengiriman eksplisit melalui konstruktor. Ketika InheritedWidget berubah, InheritedElement memberi tahu semua elemen yang bergantung, yang kemudian dibangun ulang. Mekanisme ini mendasari Theme, MediaQuery, dan Provider.

• Ketergantungan — elemen mendaftar sebagai dependen pada InheritedElement saat memanggil dependOnInheritedWidgetOfExactType.
• Pemberitahuan — saat InheritedWidget berubah, framework menandai semua elemen dependen sebagai memerlukan pembangunan ulang.
• Pembangunan ulang — elemen dependen dibangun ulang di frame berikutnya, memperbarui UI sesuai dengan data baru.

Pengaruh Element Tree terhadap kinerja

Element Tree mengonsumsi memori dan mempengaruhi kecepatan rendering pertama. Setiap elemen menempati sejumlah memori tertentu: referensi ke widget, referensi ke induk, daftar elemen anak, slot, dan bidang tambahan untuk RenderObjectElement. Mengoptimalkan Element Tree mengurangi waktu startup dan mengurangi konsumsi memori.

Penggunaan kembali elemen

Flutter berusaha menggunakan kembali elemen saat pembangunan ulang. Jika widget dalam konfigurasi baru memiliki tipe dan kunci yang sama, elemen tidak dibuat ulang — ia diperbarui. Ini jauh lebih cepat daripada membuat elemen baru dengan pemasangan berikutnya. Namun, saat tipe atau kunci berubah, elemen lama dilepas dan yang baru dibuat dari awal.

RepaintBoundary dan Element Tree

RepaintBoundary membuat RenderRepaintBoundary terpisah di RenderObject Tree yang mengisolasi bagian pohon. Pada tingkat Element Tree, RepaintBoundary tidak membuat elemen khusus — ia menggunakan SingleChildRenderObjectElement. Perbedaannya muncul pada tingkat RenderObject: saat konten RepaintBoundary berubah, hanya area yang terisolasi yang digambar ulang.

Seperti yang ditunjukkan tabel, RepaintBoundary secara signifikan mengurangi waktu penggambaran ulang dengan mengisolasi area yang berubah. Pada tingkat Element Tree, ini tidak memerlukan konfigurasi tambahan — cukup bungkus widget yang berubah dalam RepaintBoundary.