生命周期

StatelessWidget

class WidgetA extends StatelessWidget {  @override  Widget build(BuildContext context) {    return ...;  }}

由于無狀態(tài)組件在執(zhí)行過程中只有一個 build 階段，在執(zhí)行期間只會執(zhí)行一個 build 函數(shù)，沒有其他生命周期函數(shù)，因此在執(zhí)行速度和效率方面比有狀態(tài)組件更好。所以在設(shè)計組件時，要考慮業(yè)務(wù)情況，盡量使用無狀態(tài)組件。

包含以下幾個階段:

• createState該函數(shù)為 StatefulWidget 中創(chuàng)建 State 的方法，當(dāng) StatefulWidget 被調(diào)用時會立即執(zhí)行 createState。
• initState
• 該函數(shù)為 State 初始化調(diào)用，因此可以在此期間執(zhí)行 State 各變量的初始賦值，同時也可以在此期間與服務(wù)端交互，獲取服務(wù)端數(shù)據(jù)后調(diào)用 setState 來設(shè)置 State。
• didChangeDependencies該函數(shù)是在該組件依賴的 State 發(fā)生變化時，這里說的 State 為全局 State，例如語言或者主題等，類似于前端 Redux 存儲的 State。
• build主要是返回需要渲染的 Widget，由于 build 會被調(diào)用多次，因此在該函數(shù)中只能做返回 Widget 相關(guān)邏輯，避免因?yàn)閳?zhí)行多次導(dǎo)致狀態(tài)異常，注意這里的性能問題。
• reassemble主要是提供開發(fā)階段使用，在 debug 模式下，每次熱重載都會調(diào)用該函數(shù)，因此在 debug 階段可以在此期間增加一些 debug 代碼，來檢查代碼問題。
• didUpdateWidget該函數(shù)主要是在組件重新構(gòu)建，比如說熱重載，父組件發(fā)生 build 的情況下，子組件該方法才會被調(diào)用，其次該方法調(diào)用之后一定會再調(diào)用本組件中的 build 方法。
• deactivate在組件被移除節(jié)點(diǎn)后會被調(diào)用，如果該組件被移除節(jié)點(diǎn)，然后未被插入到其他節(jié)點(diǎn)時，則會繼續(xù)調(diào)用 dispose 永久移除。
• dispose永久移除組件，并釋放組件資源。

State 改變時組件如何刷新

先來看看下方的代碼:

class MyHomePage extends StatefulWidget {
  @override  _MyHomePageState createState() => _MyHomePageState();}
class _MyHomePageState extends State<MyHomePage> {  int _counter = 0;
  void _incrementCounter() {    setState(() {      _counter++;    });  }
  @override  Widget build(BuildContext context) {    return Scaffold(      body: Center(        child: Column(          mainAxisAlignment: MainAxisAlignment.center,          children: [            WidgetA(_counter),            WidgetB(),            WidgetC(_incrementCounter)          ],        ),      ),    );  }}
class WidgetA extends StatelessWidget {  final int counter;
  WidgetA(this.counter);
  @override  Widget build(BuildContext context) {    return Center(      child: Text(counter.toString()),    );  }}
class WidgetB extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Text('I am a widget that will not be rebuilt.');  }}
class WidgetC extends StatelessWidget {  final void Function() incrementCounter;
  WidgetC(this.incrementCounter);
  @override  Widget build(BuildContext context) {    return RaisedButton(      onPressed: () {        incrementCounter();      },      child: Icon(Icons.add),    );  }}

我們有三個 Widget，一個負(fù)責(zé)顯示 count，一個按鈕改變 count，一個則是靜態(tài)顯示文字，通過這三個 Widget 來對比比較頁面的刷新邏輯。

上面代碼中，三個 Widget 是在 _MyHomePageState 的 build 中創(chuàng)建的，執(zhí)行后點(diǎn)擊按鈕可以發(fā)現(xiàn)三個 Widget 都刷新了。

在 Flutter Performance 面板上選中 Track Widget Rebuilds 即可看到

雖然三個 Widget 都是無狀態(tài)的 StatelessWidget，但是因?yàn)?_MyHomePageState 的 State 改變時會重新執(zhí)行 build 函數(shù)，所以三個 Widget 會重新創(chuàng)建，這也是為什么 WidgetA 雖然是無狀態(tài)的 StatelessWidget 卻依然可以動態(tài)改變的原因。

所以: 無狀態(tài)的 StatelessWidget 并不是不能動態(tài)改變，只是在其內(nèi)部無法通過 State 改變，但是其父 Widget 的 State 改變時可以改變其構(gòu)造參數(shù)使其改變。實(shí)際上確實(shí)不能改變，因?yàn)槭且粋€新的實(shí)例。

下面我們將三個組件提前創(chuàng)建，可以在 _MyHomePageState 的構(gòu)造函數(shù)中創(chuàng)建，修改后代碼如下:

class_MyHomePageStateextendsState<MyHomePage>{  int _counter = 0;  List children;
  _MyHomePageState(){    children = [      WidgetA(_counter),      WidgetB(),      WidgetC(_incrementCounter)    ];  }
  void _incrementCounter() {    setState(() {      _counter++;    });  }
  @override  Widget build(BuildContext context) {    return Scaffold(      body: Center(        child: Column(          mainAxisAlignment: MainAxisAlignment.center,          children: children,        ),      ),    );  }}

再次執(zhí)行，發(fā)現(xiàn)點(diǎn)擊沒有任何效果，F(xiàn)lutter Performance 上可以看到?jīng)]有 Widget 刷新 (這里指三個 Widget，當(dāng)然 Scaffold 還是刷新了)。

這是因?yàn)榻M件都提前創(chuàng)建了，所以執(zhí)行 build 時沒有重新創(chuàng)建三個 Widget，所以 WidgetA 顯示的內(nèi)容并沒有改變，因?yàn)樗?counter 沒有重新傳入。

所以，不需要動態(tài)改變的組件可以提前創(chuàng)建，build 時直接使用即可，而需要動態(tài)改變的組件實(shí)時創(chuàng)建。

這樣就可以實(shí)現(xiàn)局部刷新了么？我們繼續(xù)改動代碼如下:

class_MyHomePageStateextendsState{  int _counter = 0;  Widget b = WidgetB();  Widget c ;
  _MyHomePageState(){    c = WidgetC(_incrementCounter);  }
  void _incrementCounter() {    setState(() {      _counter++;    });  }
  @override  Widget build(BuildContext context) {    return Scaffold(      body: Center(        child: Column(          mainAxisAlignment: MainAxisAlignment.center,          children: [            WidgetA(_counter),            b,            c          ],        ),      ),    );  }}

所以: 通過提前創(chuàng)建靜態(tài)組件 build 時直接使用，而 build 時直接創(chuàng)建動態(tài) Widget 這種方式可以實(shí)現(xiàn)局部刷新。

注意:只要 setState，_MyHomePageState 就會刷新，所以 WidgetA 就會跟著刷新，即使 count 沒有改變。比如上面代碼中將 setState 中的 _count++ 代碼注釋掉，再點(diǎn)擊按鈕雖然內(nèi)容沒有改變，但是 WidgetA 依然刷新。

這種情況可以通過 InheritedWidget 來進(jìn)行優(yōu)化。

InheritedWidget

InheritedWidget 的作用什么？網(wǎng)上有人說是數(shù)據(jù)共享，有人說是用于局部刷新。我們看官方的描述:

Baseclassforwidgetsthatefficientlypropagateinformationdownthetree.

可以看到它的作用是 Widget 樹從上到下有效的傳遞消息，所以很多人理解為數(shù)據(jù)共享，但是注意這個 "有效的"，這個才是它的關(guān)鍵，而這個有效的其實(shí)就是解決上面提到的問題。

那么它怎么使用？

先創(chuàng)建一個繼承至 InheritedWidget 的類:

class MyInheriteWidget extends InheritedWidget{  final int count;  MyInheriteWidget({@required this.count, Widget child}) : super(child: child);
  static MyInheriteWidget of(BuildContext context){    return context.dependOnInheritedWidgetOfExactType();  }
  @override  bool updateShouldNotify(MyInheriteWidget oldWidget) {    return oldWidget.count != count;  }}

這里將 count 傳入。重點(diǎn)注意要實(shí)現(xiàn) updateShouldNotify 函數(shù)，通過名字可以知道這個函數(shù)決定 InheritedWidget 的 Child Widget 是否需要刷新，這里我們判斷如果與之前改變了才刷新。這樣就解決了上面提到的問題。

然后還要實(shí)現(xiàn)一個 static 的 of 方法，用于 Child Widget 中獲取這個 InheritedWidget，這樣就可以訪問它的 count 屬性了，這就是消息傳遞，即所謂的數(shù)據(jù)共享 (因?yàn)?InheritedWidget 的 child 可以是一個 layout，里面有多個 widget，這些 widget 都可以使用這個 InheritedWidget 中的數(shù)據(jù))。

然后我們改造一下 WidgetA:

classWidgetAextendsStatelessWidget{
  @override  Widget build(BuildContext context) {    final MyInheriteWidget myInheriteWidget = MyInheriteWidget.of(context);    return Center(      child: Text(myInheriteWidget.count.toString()),    );  }}

這次不用在構(gòu)造函數(shù)中傳遞 count 了，直接通過 of 獲取 MyInheriteWidget，使用它的 count 即可。

最后修改 _MyHomePageState:

class _MyHomePageState extends State {  int _counter = 0;  Widget a = WidgetA();  Widget b = WidgetB();  Widget c ;
  _MyHomePageState(){    c = WidgetC(_incrementCounter);  }
  void _incrementCounter() {    setState(() {      _counter++;    });  }
  @override  Widget build(BuildContext context) {    return Scaffold(      body: Center(        child: Column(          mainAxisAlignment: MainAxisAlignment.center,          children: [            MyInheriteWidget(              count: _counter,              child: a,            ),            b,            c          ],        ),      ),    );  }}

注意，這里用 MyInheriteWidget 包裝一下 WidgetA，而且 WidgetA 必須提前創(chuàng)建，如果在 build 中創(chuàng)建則每次 MyInheriteWidget 刷新都會跟著刷新，這樣 updateShouldNotify 函數(shù)的效果就無法達(dá)到。

執(zhí)行，點(diǎn)擊按鈕，可以發(fā)現(xiàn)只有 WidgetA 刷新了 (當(dāng)然 MyInheriteWidget 也刷新了)。如果注釋掉 setState 中的 _count++ 代碼，再執(zhí)行并點(diǎn)擊發(fā)現(xiàn)雖然 MyInheriteWidget 刷新了，但是 WidgetA 并不刷新，因?yàn)?MyInheriteWidget 的 count 并未改變。

下面我們改動一下代碼，將 WidgetB 和 C 都放入 MyInheriteWidget 會怎樣？

@override  Widget build(BuildContext context) {    return Scaffold(      body: Center(        child: Column(          mainAxisAlignment: MainAxisAlignment.center,          children: [            MyInheriteWidget(              count: _counter,              child: Column(                children: [                  a,                  b,                  c                ],              ),            ),          ],        ),      ),    );  }}

MyInheriteWidget 的 child 是一個 Column，將 a、b、c 都放在這下面。執(zhí)行會發(fā)現(xiàn)依然是 WidgetA 刷新，B 和 C 都不刷新。這是因?yàn)樵?B 和 C 中沒有執(zhí)行 MyInheriteWidget 的 of 函數(shù)，就沒有執(zhí)行 dependOnInheritedWidgetOfExactType，這樣其實(shí)就沒構(gòu)成依賴，MyInheriteWidget 就不會通知它們。

如果我們修改 WidgetC，在 build 函數(shù)中添加一行 MyInheriteWidget.of(context); 那么雖然沒有任何使用，依然會跟著刷新，因?yàn)榻⒘艘蕾囮P(guān)系就會被通知。

InheritedWidget 會解決多余的刷新問題，比如在一個頁面中有多個屬性，同樣有多個 Widget 來使用這些屬性，但是并不是每個 Widget 都使用所有屬性。如果用最普通的實(shí)現(xiàn)方式，那么每次 setState (無論改變哪個屬性) 都需要刷新這些 Widget。但是如果我們用多個 InheritedWidget 來為這些 Widget 分類，使用相同屬性的用同一個 InheritedWidget 來包裝，并實(shí)現(xiàn) updateShouldNotify，這樣當(dāng)改變其中一個屬性時，只有該屬性相關(guān)的 InheritedWidget 才會刷新它的 child，這樣就提高了性能。

InheritedModel

InheritedModel 是繼承至 InheritedWidget 的，擴(kuò)充了它的功能，所以它的功能更加強(qiáng)大。具體提現(xiàn)在哪里呢？

通過上面我們知道，InheritedWidget 可以通過判斷它的 data 是否變化來決定是否刷新 child，但是實(shí)際情況下這個 data 可以是多個變量或者一個復(fù)雜的對象，而 child 也不是單一 widget，而是一系列 widget 組合。比如展示一本書，數(shù)據(jù)可能有書名、序列號、日期等等，但是每個數(shù)據(jù)可能單獨(dú)變化，如果用 InheritedWidget，每種數(shù)據(jù)就需要一個 InheritedWidget 類，然后將使用該數(shù)據(jù)的 widget 包裝，這樣才能包裝改變某個數(shù)據(jù)時其他 widget 不刷新。

但是這樣的問題就是 widget 層級更加復(fù)雜混亂，InheritedModel 就可以解決這個問題。InheritedModel 最大的功能就是根據(jù)不同數(shù)據(jù)的變化刷新不同的 widget。下面來看看如何實(shí)現(xiàn)。

首先創(chuàng)建一個 InheritedModel:

class MyInheriteModel extends InheritedModel<String>{  final int count1;  final int count2;  MyInheriteModel({@required this.count1, @required this.count2, Widget child}) : super(child: child);
  static MyInheriteModel of(BuildContext context, String aspect){    return InheritedModel.inheritFrom(context, aspect: aspect);  }
  @override  bool updateShouldNotify(MyInheriteModel oldWidget) {    return count1 != oldWidget.count1 || count2 != oldWidget.count2;  }
  @override  bool updateShouldNotifyDependent(MyInheriteModel oldWidget, Set dependencies) {    return (count1 != oldWidget.count1 && dependencies.contains("count1")) ||        (count2 != oldWidget.count2 && dependencies.contains("count2"));  }}

count1!=oldWidget.count1&&dependencies.contains("count1")

然后同樣需要實(shí)現(xiàn)一個 static 的 of 函數(shù)來獲取這個 InheritedModel，不同的是這里獲取的代碼變化了:

InheritedModel.inheritFrom(context,aspect:aspect);

然后我們改造 WidgetA:

class WidgetA extends StatelessWidget {
  @override  Widget build(BuildContext context) {    final MyInheriteModel myInheriteModel = MyInheriteModel.of(context, "count1");    return Center(      child: Text(myInheriteModel.count1.toString()),    );  }}

可以看到，這里定義了 aspect。

然后因?yàn)橛袃蓚€ count，所以我們再新增兩個 Widget 來處理 count2:

class WidgetD extends StatelessWidget {
  @override  Widget build(BuildContext context) {    final MyInheriteModel myInheriteModel = MyInheriteModel.of(context, "count2");    return Center(      child: Text(myInheriteModel.count2.toString()),    );  }}
class WidgetE extends StatelessWidget {  final void Function() incrementCounter;
  WidgetE(this.incrementCounter);
  @override  Widget build(BuildContext context) {    return RaisedButton(      onPressed: () {        incrementCounter();      },      child: Icon(Icons.add),    );  }}

這里可以看到 WidgetD 的 aspect 與 WidgetA 是不同的。

最后修改 _MyHomePageState:

class _MyHomePageState extends State {  int _counter = 0;  int _counter2 = 0;  Widget a = Row(    children: [      WidgetA(),      WidgetD()    ],  );  Widget b = WidgetB();  Widget c ;  Widget e ;
  _MyHomePageState(){    c = WidgetC(_incrementCounter);    e = WidgetE(_incrementCounter2);  }
  void _incrementCounter() {    setState(() {      _counter++;    });  }
  void _incrementCounter2() {    setState(() {      _counter2++;    });  }
  @override  Widget build(BuildContext context) {    return Scaffold(      body: Center(        child: Column(          mainAxisAlignment: MainAxisAlignment.center,          children: [            MyInheriteModel(              count1: _counter,              count2: _counter2,              child: a,            ),            b,            c,            e          ],        ),      ),    );  }}

WidgetD 和 E 是處理 count2 的，A 和 C 則是處理 count。而 MyInheriteModel 的 child 不是單一 Widget，而是一個 Row，包含 WidgetD 和 A。

InheritedNotifier

class MyInheriteNotifier extends InheritedNotifier<AnimationController>{  MyInheriteNotifier({       Key key,       AnimationController notifier,       Widget child,     }) : super(key: key, notifier: notifier, child: child);
  static double of(BuildContext context){    return context.dependOnInheritedWidgetOfExactType().notifier.value;  }}

這里提供的 of 函數(shù)則直接返回 AnimationController 的 value 即可。

然后創(chuàng)建一個 Widget:

classSpinnerextendsStatelessWidget{  @override  Widget build(BuildContext context) {    return Transform.rotate(      angle: MyInheriteNotifier.of(context) * 2 * pi,      child: Text("who!!"),    );  }}

內(nèi)容會根據(jù) AnimationController 進(jìn)行旋轉(zhuǎn)。

修改 WidgetA:

class WidgetA extends StatelessWidget {
  @override  Widget build(BuildContext context) {    return Center(      child: Text("WidgetA"),    );  }}

class _MyHomePageState extends State with SingleTickerProviderStateMixin {  AnimationController _controller;
  @override  void initState() {    super.initState();    _controller = AnimationController(      vsync: this,      duration: Duration(seconds: 10),    )..repeat();  }
  @override  Widget build(BuildContext context) {    return Scaffold(      body: Center(        child: Column(          mainAxisAlignment: MainAxisAlignment.center,          children: [            WidgetA(),            MyInheriteNotifier(                notifier: _controller,                child: Spinner()            ),          ],        ),      ),    );  }}

總之 InheritedNotifier 是一個更細(xì)化的工具，聚焦到一個具體場景中，使用起來也更方便。

Notifier

最后再簡單介紹一下 Notifier，考慮一個需求: 頁面 A 是列表頁，而頁面 B 是詳情頁，兩個頁面都有點(diǎn)贊操作和顯示點(diǎn)贊數(shù)量，需要在一個頁面點(diǎn)贊后兩個頁面的數(shù)據(jù)同時刷新。這種情況下就可以使用 Flutter 提供另外一種方式 —— Notifier。

Notifier 其實(shí)就是訂閱模式的實(shí)現(xiàn)，主要包含 ChangeNotifier 和 ValueNotifier，使用起來也非常簡單。通過 addListener 和 removeListener 進(jìn)行訂閱和取消訂閱 (參數(shù)是無參無返回值的 function)，當(dāng)數(shù)據(jù)改變時調(diào)用 notifyListeners(); 通知即可。

ValueNotifier 是更簡單的 ChangeNotifier，只有一個數(shù)據(jù) value，可以直接進(jìn)行 set 和 get，set 時自動執(zhí)行 notifyListeners()，所以適合單數(shù)據(jù)的簡單場景。

當(dāng)時注意 Notifier 只是共享數(shù)據(jù)并通知變化，并不實(shí)現(xiàn)刷新，所以還要配合其他一并實(shí)現(xiàn)。比如上面的 InheritedNotifier (因?yàn)?Notifier 都繼承 Listenable 接口，所以兩個可以很簡單的配合使用)，或者第三方庫 Provider (web 開發(fā)的習(xí)慣) 等等。