flutter 生命周期

Flutter 中的生命周期,包含以下幾個階段:

  • createState ,該函數(shù)為 StatefulWidget 中創(chuàng)建 State 的方法,當 StatefulWidget 被調用時會立即執(zhí)行 createState 。

  • initState ,該函數(shù)為 State 初始化調用,因此可以在此期間執(zhí)行 State 各變量的初始賦值,同時也可以在此期間與服務端交互,獲取服務端數(shù)據(jù)后調用 setState 來設置 State。

  • didChangeDependencies ,該函數(shù)是在該組件依賴的 State 發(fā)生變化時,這里說的 State 為全局 State ,例如語言或者主題等,類似于前端 Redux 存儲的 State 。

  • build ,主要是返回需要渲染的 Widget ,由于 build 會被調用多次,因此在該函數(shù)中只能做返回 Widget 相關邏輯,避免因為執(zhí)行多次導致狀態(tài)異常。

  • reassemble ,主要是提供開發(fā)階段使用,在 debug 模式下,每次熱重載都會調用該函數(shù),因此在 debug 階段可以在此期間增加一些 debug 代碼,來檢查代碼問題。

  • didUpdateWidget ,該函數(shù)主要是在組件重新構建,比如說熱重載,父組件發(fā)生 build 的情況下,子組件該方法才會被調用,其次該方法調用之后一定會再調用本組件中的 build 方法。

  • deactivate ,在組件被移除節(jié)點后會被調用,如果該組件被移除節(jié)點,然后未被插入到其他節(jié)點時,則會繼續(xù)調用 dispose 永久移除。

  • dispose ,永久移除組件,并釋放組件資源。

整個過程分為四個階段:

  1. 初始化階段,包括兩個生命周期函數(shù) createState 和 initState;

  2. 組件創(chuàng)建階段,也可以稱組件出生階段,包括 didChangeDependencies 和 build;

  3. 觸發(fā)組件多次 build ,這個階段有可能是因為 didChangeDependencies、setState 或者 didUpdateWidget 而引發(fā)的組件重新 build ,在組件運行過程中會多次被觸發(fā),這也是優(yōu)化過程中需要著重需要注意的點;

  4. 最后是組件銷毀階段,deactivate 和 dispose。

import 'package:flutter/material.dart';
/// 創(chuàng)建有狀態(tài)測試組件
class TestStatefulWidget extends StatefulWidget {
  @override
  createState() {
    print('create state');
    return TestState();
  }
}
/// 創(chuàng)建狀態(tài)管理類,繼承狀態(tài)測試組件
class TestState extends State<TestStatefulWidget> {
  /// 定義 state [count] 計算器
  int count = 1;
  /// 定義 state [name] 為當前描述字符串
  String name = 'test';
  @override
  initState() {
    print('init state');
    super.initState();
  }
  @override
  didChangeDependencies() {
    print('did change dependencies');
    super.didChangeDependencies();
  }
  @override
  didUpdateWidget(TestStatefulWidget oldWidget) {
    count++;
    print('did update widget');
    super.didUpdateWidget(oldWidget);
  }
  @override
  deactivate() {
    print('deactivate');
    super.deactivate();
  }
  @override
  dispose() {
    print('dispose');
    super.dispose();
  }
  @override
  reassemble(){
    print('reassemble');
    super.reassemble();
  }
  /// 修改 state name
  void changeName() {
    setState(() {
      print('set state');
      this.name = 'flutter';
    });
  }
  @override
  Widget build(BuildContext context) {
    print('build');
    return Column(
      children: <Widget>[
        FlatButton(
          child: Text('$name $count'), // 使用 Text 組件顯示描述字符和當前計算
          onPressed:()=> this.changeName(), // 點擊觸發(fā)修改描述字符 state name
        )
      ],
    );
  }
}

在 main.dart 中加載該組件

import 'package:flutter/material.dart';
import 'package:two_you_friend/pages/test_stateful_widget.dart';
/// APP 核心入口文件
void main() => runApp(MyApp());
/// MyApp 核心入口界面
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Two You', // APP 名字
        theme: ThemeData(
          primarySwatch: Colors.blue, // APP 主題
        ),
        home: Scaffold(
            appBar: AppBar(
              title: Text('Two You'), // 頁面名字
            ),
            body: Center(
             child:
              TestStatefulWidget(),
            )
        ));
  }
}

打印信息
flutter: create state
flutter: init state
flutter: did change dependencies
flutter: build
flutter: reassemble
flutter: did update widget
flutter: build

摘自 《 Flutter快學快用24講》

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容