Metoda setState w Flutter - działanie i różnice do React Native

We Flutter oraz w React Native posiadamy metody setState. Służą one do aktualizacji danych, które mają bezpośredni wpływ na to, co jest widoczne w interfejsie użytkownika. Ogólnie rzecz biorąc efekt ich działania jest praktycznie taki sam: w React Native ponownie zostaje wykonana metoda render, a we Flutter ponownie zostaje wykonana metoda build stanu widgetu. W obu przypadkach następuje ponowne przebudowanie interfejsu użytkownika, ale czy jest coś, czym one się od siebie różnią?

Oczywiście, że tak. W przypadku React Native metoda setState jest metodą asynchroniczną i nie daje nam ona gwarancji, że bezpośrednio po jej wywołaniu, stan komponentu zostanie zaktualizowany (więcej o tej cesze piszę tutaj). Dodatkowo w przypadku React Native ważne jest, co przekazujemy do tej metody, ponieważ określamy w ten sposób, które wartości tak naprawdę zostają przez nas aktualizowane.

Kurs Poznaj Flutter!

Jesteś programistą i chcesz wejść na rynek aplikacji mobilnych? Lub programujesz już aplikacje na Android lub iOS, ale chcesz sprawić, żeby ten proces był szybki i przyjemny, a przy okazji zaoszczędzić na pracy nawet 50% czasu? Próbowałeś ukończyć jakiś tutorial, ale wszystko wydawało Ci się zbyt zawiłe lub szukasz czegoś w języku polskim? Albo w ogóle chcesz zacząć swoją przygodę z programowaniem i szukasz czegoś co da Ci szybko widoczne wyniki oraz będzie łatwe do nauki?

Wejdź na stronę Poznaj Flutter i dowiedz się więcej!

W przypadku Fluttera jest odrobinę inaczej. Pierwsza różnica polega na tym, że metoda setState jest w jego przypadku synchroniczna i zostaje wykonana natychmiast po jej wywołaniu. Po utworzeniu nowego projektu widzimy aplikację z licznikiem oraz przykładowe wywołanie aktualizacji stanu widgetu:

void _incrementCounter() {
 setState(() {
   _counter++;
 });
}

Wydawać by się mogło, że tak jak w przypadku React Native, wewnątrz funkcji, która jest przekazana do metody setState, musimy określić, co dokładnie chcemy zaktualizować. Nic bardziej mylnego. We Flutter nie ma znaczenia, co znajduje się wewnątrz setState, ponieważ ta metoda służy tylko i wyłącznie na poinformowaniu frameworka o konieczności przebudowania interfejsu widgetu. Nie ma więc najmniejszego problemu, aby poniższy kod również był prawidłowy:

void _incrementCounter() {
 _counter++;
 setState(() {});
}

Czy warto więc cokolwiek umieszczać wewnątrz setState? Możemy potraktować to tylko i wyłącznie jako poprawę czytelności naszego kodu, ponieważ już na pierwszy rzut oka widać jest dokładnie, które wartości zostaną zaktualizowane podczas przebudowywania się widgetu. Należy tylko pamiętać o tym, żeby jednak nie dodawać tam wykonywania innych operacji, które nie do końca powiązane są z samymi aktualizowanymi wartościami, tj. wszelkiego rodzaju obliczenia czy operacje asynchroniczne.