Painted levels: being fostered fostered fostered

Tags: “Flutter” “StatefulWidget” “Lifecycle” by Mu Linlu

StatefulWidgetWhat is?

A widget with variable state.

abstract class StatefulWidget extends Widget {
  const StatefulWidget({ Key key }) : super(key: key);
 
  @override
  StatefulElement createElement() => StatefulElement(this);

  @protected
  State createState();
}
Copy the code

You can see that StatefulWidget configures StatefulElement through its class definition.

aboutState

Internal logic and state of StatefulWidget. Created by StatefulWidget’s createState.

The StatefulWidget instance itself is immutable, and its mutable State in a StatefulWidget is stored in the State object associated with it whenever, The Framework calls the createState method once whenever a new StatefulElement is mounted in the tree (which inevitably requires injecting a StatefulWidget) or a StatefulWidget is injected. (Actually, createState is called when StatefulElement is constructed to create the _state object.)

Which means that ifStatefulWidgetWhen inserted into multiple locations in the tree, there will be multipleStateObjects are associated with each of them.

The definition of this class is as follows:

abstract class State<T extends StatefulWidget> with Diagnosticable { T get widget => _widget; T _widget; . BuildContext get context => _element; StatefulElement _element; bool get mounted => _element ! = null; @protected @mustCallSuper void initState() { assert(_debugLifecycleState == _StateLifecycle.created); } @mustCallSuper @protected void didUpdateWidget(covariant T oldWidget) { } @protected @mustCallSuper void reassemble() { } @protected void setState(VoidCallback fn) { .... final dynamic result = fn() as dynamic; . _element.markNeedsBuild(); } @protected @mustCallSuper void deactivate() { } @protected @mustCallSuper void dispose() { } @protected Widget build(BuildContext context); @protected @mustCallSuper void didChangeDependencies() { } ... }Copy the code

Methods an overview

  • initState

Description: Override this method to perform initialization. ** Scenario: ** If State’s build method depends on an object that itself can change State. (For example, ChangeNotifier or Stream, or any other object that can subscribe to and receive notifications) The correct way is:

  1. ininitStateSubscribe to this object.
  2. whenelementthewidgetSituation that needs to be updated:Widget.canUpdateIn thedidUpdateWidgetFrom the oldwidgetIn theunsubscribe And to the newwidgetperformsubscribe.
  3. indisposeIn theunsubscribe .

Note: * * * * this method cannot be used BuildContext. DependOnInheritedWidgetOfExactType. But this method is called immediately after the call didChangeDependencies, can use in didChangeDependencies BuildContext. DependOnInheritedWidgetOfExactType.

Call timing: StatefulElement, which is called when the tree is first inserted and before the build method is called.

  • build

Description: StatefulElement returns the widget through this method and updates itself by calling updateChild. Call timing: The framework calls this method in several different scenarios:

  1. callinitStateAfter;
  2. calldidUpdateWidgetAfter;
  3. setStateAfter the call;
  4. StateObject dependencies (dependency ) change; For example: beforebuildWhen the referenceInheritedWidgetThe changes.
  5. Call thedeactivateAfter, then willStateObject is reinserted at another location in the tree.
  • didUpdateWidget

Description: Update a StatefulWidget if a StatefulElement exists and conforms to widget.canupdate.

Call timing: This is called whenever StatefulElement’s configuration widget changes.

Note: The didUpdateWidget method eventually calls the Build method, so calling setState in this method is redundant. If you override this method, be sure to call super.didupDateWidget (oldWidget).

  • didChangeDependencies

Call timing: Called when the InheritedWidget of this State object changes.

  • reassemble

Description: Used for hot Reload during development.

Call time: When hot Reload is called, the build method is also called after the call. You don’t need to do anything in this method.

  • deactivate

Call timing: Called when StatefulElement is removed from the tree.

  • dispose

** Called when: ** Called when a StatefulElement is unmounted from the tree.

conclusion

StatefulWidget is used to configure a StatefulElement, but the State in between takes over the life cycle of a StatefulElement, A StatefulWidget is only an immutable instance that connects State to a StatefulElement. Therefore, the life cycle of a StatefulWidget depends on the StatefulElement, and State is the simplest and most direct manifestation of it.

To better understand the life cycle of StatefulWidget, I drew a diagram of State, StatefulElement, Component, and Element.

Ways to focus on us are:

QiShare(GitHub) QiShare(CocoaChina) QiShare(StackOverflow) QiShare(wechat)

RenderObjectElement and RenderObjectWidget of Flutter

The StatelessWidget in A Flutter and its lifecycle The Widget in a Flutter The Element in a Flutter (Part 2) B Swift 5.1 (21) – Generic Swift 5.1 (20) – Protocol Swift 5.1 (19) – Extension Brief Introduction to the process of building qizu Android team — aTaller Qizu Weekly