Flutter入門進階之旅（二十一）Flutter 組件的生命周期

前言

在前面的章節中我們從Flutter的基礎組件到高階組件由淺入深的進行了系統的鞏固學習，其中還包括Flutter中的資料存盤，網路請求，利用路由進行頁面切換傳值，經過了這一系列的知識體系學習鞏固，我們基本把Flutter入門所需要儲備的所有知識學習完畢，今天我們在之前課程的基礎上做一期鞏固提高的分享，來一起探索下Flutter中關于組件的生命周期，

課程目標

• 掌握組件整個生命周期流程
• 掌握各個生命周期回呼函式的呼叫時機及存在意義
• 能合理結合組件的生命周期來完善業務需求

1 什么是組件的生命周期

熟悉移動端開發的朋友對生命周期這個概念都不會陌生，如在Android、iOS、React、Vue中都會有生命周期這一概念，它定義了組件從初始化到被加載再到中間過渡態的狀態改變直至被銷毀整個一系列的存在程序，

結合上述流程圖中對Flutter中定義的各個生命周期段大致可以簡短概括為三大階段：

• 初始化
• 狀態改變
• 銷毀

2.各個生命周期階段存在意義講解

1. createState

createState 是 StatefulWidget 里創建 State 的方法，當要創建新的 StatefulWidget 的時候，會立即執行 createState，而且只執行一次，createState 必須要實作：

class LifeCycleDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _LifeCycleState();
}

2. initState

前面的 createState 是在創建 StatefulWidget 的時候會呼叫，initState 是 StatefulWidget 創建完后呼叫的第一個方法，而且只執行一次，類似于 Android 的 onCreate、IOS 的 viewDidLoad()，所以在這里 View 并沒有渲染，但是這時 StatefulWidget 已經被加載到渲染樹里了，這時 StatefulWidget 的 mount 的值會變為 true，直到 dispose 呼叫的時候才會變為 false，可以在 initState 里做一些初始化的操作，

3. didChangeDependencies

當 StatefulWidget 第一次創建的時候，didChangeDependencies 方法會在 initState 方法之后立即呼叫，之后當 StatefulWidget 重繪的時候，就不會呼叫了，除非你的 StatefulWidget 依賴的 InheritedWidget 發生變化之后，didChangeDependencies 才會呼叫，所以 didChangeDependencies 有可能會被呼叫多次，

4. build

在 StatefulWidget 第一次創建的時候，build 方法會在 didChangeDependencies 方法之后立即呼叫，另外一種會呼叫 build 方法的場景是，每當 UI 需要重新渲染的時候，build 都會被呼叫，所以 build 會被多次呼叫，然后 回傳要渲染的 Widget，千萬不要在 build 里做除了創建 Widget 之外的操作，因為這個會影響 UI 的渲染效率，

5. didUpdateWidget

didUpdateWidget 這個生命周期我們一般不會用到，只有在使用 key 對 Widget 進行復用的時候才會呼叫，

6. deactivate

當要將 State 物件從渲染樹中移除的時候，就會呼叫 deactivate 生命周期，這標志著 StatefulWidget 將要銷毀，但是有時候 State 不會被銷毀，而是重新插入到渲染樹種，

7. dispose

當 View 不需要再顯示，從渲染樹中移除的時候，State 就會永久的從渲染樹中移除，就會呼叫 dispose 生命周期，這時候就可以在 dispose 里做一些取消監聽、影片的操作，和 initState 是相反的，

3.實體代碼講解

下面我們來通過一個簡單的小例子通過列印log的方式來記錄一下在Flutter中組件從被加載到狀態改變，再到被移除的整個生命周期變化程序，

示例代碼

import 'package:flutter/material.dart';

class LifeCycleDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _LifeCycleState();
}

class _LifeCycleState extends State<LifeCycleDemo> {

  var _count = 0;

  @override
  void initState() {
    super.initState();
    print('----------initState------------');
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print('----------didChangeDependencies------------');
  }

  @override
  Widget build(BuildContext context) {
    print('----------build------------');
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RaisedButton(
              child: Text('關閉頁面'),
              onPressed: () => {Navigator.of(context).pop()},
            ),
            Text('當前計數器數量 : '+_count.toString()),
            RaisedButton(
              child: Text('重繪界面'),
              onPressed: () => {
                this.setState(() {
                  _count++;
                  print('----------重繪界面------------');
                })
              },
            )
          ],
        ),
      ),
    );
  }

  @override
  void deactivate() {
    super.deactivate();
    print('----------deactivate------------');
  }

  @override
  void dispose() {
    super.dispose();
    print('----------dispose------------');
  }

  @override
  void didUpdateWidget(LifeCycleDemo oldWidget) {
    super.didUpdateWidget(oldWidget);
    print('----------didUpdateWidget------------');
  }
}

3.1當頁面被加載時：

通過上述代碼，我們模擬來一個簡單的組件被加載到頁面上時，從初始化到整個節目完成渲染后，組件經歷了從initState–>didChangeDependencies–>build的程序后，如果此時組件沒有更新state到操作，界面將會一直保持在build渲染完成之后的狀態，對應各個生命周期回呼函式列印log如下所示：

3.2當組件重繪時

我們知道在Flutter中StatefulWidget通過State來管理整個頁面的狀態變化，當state發生變化時，及時通知到相應的組件發生改變，當頁面狀態發生更新時生命周期中的build回呼函式會被重新喚起然后重新渲染界面，對組件狀態做出的變化及時更新渲染到UI上，

如上圖，當我點擊兩次重繪界面按鈕，通過setState來改變_count的值，然后組件感知到state發生變化，重新呼叫build函式，重繪界面直至新的狀態渲染在UI上，

控制臺列印的log如下：

3.組件被卸載（銷毀）時

當頁面被銷毀時，組件的的生命周期狀態從deactivate–>dipose變化，此程序多為用戶點擊回傳或者呼叫Navigator.of(context).pop()路由推出當前頁面后發生回呼，此時用戶可以根據具體的業務需求做一些取消監聽、影片的操作，

3 結語

通過開篇對各個生命周期函式的存在意義的講解讀者可利用上述生命周期測驗的示例代碼自行仿照示例代碼重新寫一遍，感知一下組件生命周期存在的意義以及不同生命周期回呼函式回呼的時機，以加深理解，