Zrozumienie cyklu życia widżetu Flutter w celu efektywnego tworzenia aplikacji

Ogólnie rzecz biorąc, cykl życia reprezentuje etap od jego powstania do zniszczenia. W kontekście trzepotania jest tak samo. Dzisiaj omówimy cykl życia widżetu (nie mylić z cyklem życia aplikacji).

Głównym celem tego artykułu jako programisty fluttera jest to, w jaki sposób powinniśmy wykorzystywać te metody cyklu życia, więc przejdźmy do zabawnej części.

utwórz stan()

Kiedy tworzymy stanowy widżet we Flutterze, createStatemetoda jest natychmiast wywoływana w celu zwrócenia instancji stanu powiązanej klasy.

Jest to niezbędne, ponieważ we Flutter wszystko jest niezmienne (w tym stanowe widżety). Ważne jest, aby oddzielić zadanie mutability i przekazać je klasie state. W ten sposób Flutter może sprawić, że niezmienne klasy będą wyglądać i działać jak zmienne, a my możemy zobaczyć wszystkie zmiany w interfejsie użytkownika.

Ma to również korzystny wpływ na wydajność, ponieważ Flutterowi łatwiej jest zmienić zmienną stanu i odzwierciedlić zmianę w zoptymalizowany sposób, niż odtworzyć całe drzewo widżetów z powodu niewielkich zmian.

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => new _HomePageState();
}

Jest to pierwsza metoda zwana tworzeniem stanu po stanie. I nazywa się to tylko raz.
Tej metody można użyć do:

1. Zainicjuj późne zmienne
2. Subskrybuj transmisję itp

@override
initState() {
  super.initState();
  _controller=TextEditingController();
  myStream.listen((data) {});
}

Na czym dokładnie polega jego zależność?
Powiedzmy, że używamy MediaQuery.of w widżecie, wtedy możemy powiedzieć, że nasz widżet zależy od MediaQuery. Tak więc za każdym razem, gdy aktualizuje MediaQuery , ta metoda jest uruchamiana.

Możemy więc powiedzieć, czy nasz widżet zależy od Inherited Widget(zapytania o media, motywu, dostawców itp.) I ilekroć te odziedziczone aktualizacje push widżetu uruchomią tę metodę.

build()Po uruchomieniu tej metody, jako programista nie ma wielu scenariuszy, w których być może będziemy musieli użyć tutaj niestandardowej logiki, ale zgodnie z oficjalną dokumentacją jest napisane

wykonać jakąś kosztowną pracę (np. pobieranie sieciowe), gdy zmieniają się ich zależności, a ta praca byłaby zbyt kosztowna dla każdej kompilacji.

Na przykład: Od Ciebie Inherited Widgetmożesz otrzymać jakąś wartość i będziesz musiał wykonać kosztowną operację w oparciu o tę wartość i pokazać ją w interfejsie użytkownika. Możesz nie chcieć tego robić w metodzie kompilacji, więc didChangeDependenciesbędzie to idealne miejsce.

didUpdateWidget

Weźmy przykład, aby to zrozumieć. Masz Containerktóry jest koloru czerwonego i jednym naciśnięciem przycisku zmieniasz go na niebieski.

Tutaj zarówno stara, jak i nowa instancja obiektu są tego samego typu, runtimeType ale dane są różne, więc w tym przypadku ta metoda zostanie wyzwolona. Otrzymuje też stare widżety didUpdateWidget(Widget oldWidget).

@override
void didUpdateWidget(Widget oldWidget) {
  if (oldWidget.color != widget.color) {
  /// Your logic
  }
}

• Jeden z możliwych scenariuszy można zastosować w animacji do przejścia między wartościami.
• Innym może być konkretny przypadek użycia oparty na wymaganiach aplikacji, w oparciu o nową wartość widżetu, wykonaj różne zadania, np.: zasubskrybuj nowy strumień i anuluj subskrypcję wcześniejszego strumienia.

zbudować()

Jest to ważna metoda, w której jako programista musimy zwrócić widżet, który chcemy pokazać użytkownikowi.

Ponadto ta metoda może być wyzwalana wiele razy, więc wykonywanie kosztownych zadań w ramach tej metody nie jest dobrą praktyką.

Ta metoda może potencjalnie zostać wywołana w każdej ramce i nie powinna mieć żadnych skutków ubocznych poza zbudowaniem widżetu.

setState((){})

setState((){}) to metoda, która przyjmuje metodę jako parametr i wewnętrznie wywołuje markNeedsBuild()metodę, aby uruchomić nową kompilację.

/// Implementation of setState() in flutter 
@protected
void setState(VoidCallback fn) {
  final Object? result = fn() as dynamic;
  _element!.markNeedsBuild();
}

• nie powinniśmy przekazywać funkcji asynchronicznej do setState, ponieważ wewnętrznie nie będzie czekać na rozwiązanie w przyszłości, więc nie zobaczymy pożądanego odzwierciedlenia interfejsu użytkownika.

setState(() {
  /// New State values
  color=Colors.red;
});

Metodadispose() jest wywoływana, gdy obiekt stanu jest usuwany. Jest to ostatnia metoda wyzwalania w cyklu życia.

Jako programista możemy więc:

1. Anuluj subskrypcję strumieni
2. Wyrzuć kontrolery
3. Zatrzymaj animacje itp

Ponieważ widżet bezstanowy nie ma własnego zmiennego stanu (co wynika z nazwy), brakuje tutaj niektórych metod cyklu życia, np initState. , itp.dispose

Źródła:
https://www.youtube.com/watch?v=_gIbneld-bw
https://api.flutter.dev/index.html