DEV Community

Cover image for Element Tree ve State Objeleri ­čĺź ­čîî ÔťĘ
G├╝lsen Keskin
G├╝lsen Keskin

Posted on

Element Tree ve State Objeleri ­čĺź ­čîî ÔťĘ

­čöą State objeleri element a─čac─▒ taraf─▒ndan y├Ânetilir ve uzun ├Âm├╝rl├╝d├╝rler.
­čöą State nesneleri Widget'lardan farkl─▒ olarak widget'lar yeniden olu┼čturuldu─čunda yok edilmez ve yeniden olu┼čturulmazlar (re-render).
­čöą State objeleri yeniden kullan─▒labilir.
­čöą Elementlerin widget'lara referanslar─▒ vard─▒r.

Tek bir state bilgisi olan widget, bir element ve bir state object aras─▒ndaki ili┼čki ┼čekil 1'de g├Âsterilmi┼čtir.

Image description
┼×ekil 1. Bir element ve bir widget aras─▒ndaki ili┼čki

Elementler, yaln─▒zca meta bilgileri ve bir widget'a referans i├žermeleri bak─▒m─▒ndan basittir, ancak widget de─či┼čirse kendi referanslar─▒n─▒ farkl─▒ bir widget'a nas─▒l g├╝ncelleyeceklerini de bilirler.

Flutter ne zaman yeniden olu┼čturulursa(rebuilding), elementin referans─▒, elementin eski referans─▒n─▒n widget a─čac─▒ndaki konumunda yeni widget'─▒ i┼čaret eder.

Image description
┼×ekil 2: Her ├Â─če farkl─▒ bir widget'a i┼čaret eder ve t├╝r├╝n├╝ bilir.

Bu nedenle, bu iki butonu de─či┼čtirdi─činizde, widget a─čac─▒nda birbirlerinin yerine ge├žerler, ancak elementin referans─▒ ayn─▒ konumu g├Âsterir. Her eleman kendi widget'─▒na bakacak ve "Bu widget de─či┼čti mi? Yoksa tamamen yeni bir widget m─▒?ÔÇŁ sorusuna g├Âre hareket edecektir. Bu nedenle yeni widget bile┼čenine referans─▒n─▒ g├╝ncellemelidir.

Sorun, neyin g├╝ncellendi─čini de┼čifre etmek i├žin elementlerin neye bakt─▒─č─▒d─▒r. Widget'ta yaln─▒zca birka├ž ├Âzelli─če bakarlar:

­čöą ├çal─▒┼čma zaman─▒nda tam t├╝r
­čöą Bir widget'─▒n anahtar─▒ (varsa)

Bu ├Ârnekte, bu widget ├Â─čelerinin renkleri widget ├Â─česi yap─▒land─▒rmas─▒nda de─čildir; durum nesnelerindedir. Element, g├╝ncellenmi┼č widget'lara i┼čaret ediyor ve yeni konfig├╝rasyonu g├Âsteriyor, ancak yine de orijinal durum nesnesini(state object) tutuyor. B├Âylece element, a─ča├žta bu yere eklenen yeni widget'─▒ g├Âr├╝yor ve ÔÇťKey yok ve runtime type hala FancyButton, bu y├╝zden referans─▒m─▒ g├╝ncellememe gerek yok. (Bkz. ┼čekil 3).

Image description
┼×ekil 3. Elementler, ayn─▒ t├╝rde olduklar─▒ i├žin ayn─▒ widget olduklar─▒n─▒ d├╝┼č├╝n├╝yorlar.

Bu sorun, framework taraf─▒ndan widget'lar─▒ a├ž─▒k├ža tan─▒mlamak i├žin kullan─▒labilen Flutter'─▒n ba┼čka bir ├Âzelli─čini sunar: keys.

Resource: Flutter in Action chapter-3

Top comments (0)