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 ,永久移除組件,并釋放組件資源。
整個過程分為四個階段:
初始化階段,包括兩個生命周期函數(shù) createState 和 initState;
組件創(chuàng)建階段,也可以稱組件出生階段,包括 didChangeDependencies 和 build;
觸發(fā)組件多次 build ,這個階段有可能是因為 didChangeDependencies、setState 或者 didUpdateWidget 而引發(fā)的組件重新 build ,在組件運行過程中會多次被觸發(fā),這也是優(yōu)化過程中需要著重需要注意的點;
最后是組件銷毀階段,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