🙌
[Flutter]StatefulWidgetのライフサイクルの個人的まとめ
StatefulWidgetのライフサイクル
この記事は
StatefulWidgetのライフサイクル⓵
と、
StatefulWidgetのライフサイクル⓶
の解説をもとに自分用(より初学者用)に噛み砕いた感じです
ライフサイクルとは
そもそもライフサイクルとは、
画面構築(Create/Start)→再描画(Rebuild/Pause)→メモリなどの廃棄(Stop/Destroy)
みたいな感じで
アクティビティを作成、停止、再開、破棄などの処理を行うシステムのこと
簡単なライフサイクル概要図
ある画面(Statefulwidget)が呼ばれると、画面を作るために、メモリ上に必要なWidgetや変数が集められます。
その後、Widgetの親子関係に従って、Widgetのツリーが構築され、画面に描画(レンダリング)されていきます。
StatefulWidgetは状態によって画面が変化するため、ユーザ操作やイベントを契機に画面の再描画が行われます。
そして、使い終わったStatefulWidgetは、メモリを開放するために破棄されます。
ライフサイクル概要図(実際に呼び出されるメソッドたち)
実際に呼び出されるメソッドたちが追加されたが、大枠のサイクルは上と全く一緒。
ライフサイクルメソッドの役割
画面構築→再描画→画面破棄 の順番
画面構築
- createState()メソッド
- statefulWidgetを構築するとすぐに呼ばれる
- Widgetツリーに状態を作るために呼ばれる
- initState()メソッド
- Widgetツリーの初期化(リセット)を行う
- その初期化時に1度だけ呼ばれる
- ここでは
BuildContext
の情報は構築されておらず、利用不可
- didChangeDependencies()メソッド
- stateオブジェクトの依存関係が変更されたときに呼び出される
- initStateの後に呼ばれるが、それ以外にも呼ばれることはある
- この時点で
BuildContext
が利用できるようになる (引数で) - 初回構築時には下記
build()
がすぐにコールされる
再描画
- build()メソッド
- Widgetで作られるUIを構築する
- 様々な場所から繰り返し呼び出される
- 変更がある部分ツリーを検知して置き換える(上書きするイメージ)
- didUpdateWidget(Widget oldWidget)
- ウィジェットの構成が変更されるたびに呼び出される
- 親Widgetが変更され、再描画する必要があるときに呼び出される
- oldWidgetパラメータを取得して比較する
- setState()メソッド
- 状態が変わったことをフレームワークに通知する
- また、親ウィジェットが再構築された時には、didUpdateWidget()がコールされる。このコールの後、再構築 (build) が行われるので、setState()はいらん。それ以外の更新処理が何かあれば、setState()メソッドを使う。
画面破棄
- deactivate()メソッド
- stateオブジェクトがツリーから削除するたびに呼び出される
- initState()メソッド
-
オブジェクトがツリーから完全に削除され、2度とビルドされなくなったら呼ばれる
-
オブジェクトがツリーから完全に削除され、2度とビルドされなくなったら呼ばれる
再描画のところの
- setState()メソッドで変更を検知→build()メソッドで変更をUIに反映
と
- ライフサイクルの概要を頭に入れつつサイクル図
の流れがポイント
以上です。間違えが見つかり次第、或いは知識がアップデートされ次第改訂していきます。🙏
Discussion