InheritedWidget 是Flutter中非常重要的一個(gè)功能型組件如输，它提供了一種數(shù)據(jù)在widget樹中從上到下傳遞锨能、共享的方式互妓，比如我們在應(yīng)用的根widget中通過InheriteWidget共享了一個(gè)數(shù)據(jù)，那么我們便可以在任意子widget中來獲取該共享的數(shù)據(jù)。
這個(gè)特性在一些需要在widget樹中共享數(shù)據(jù)的場景中非常方便糠聪，比如Flutter SDK中正是通過InheritedWidget來共享應(yīng)用主題(Theme)和Locale（當(dāng)前語言環(huán)境）信息的。

Tips: InheritedWidget和React中的context功能類似谐鼎，和逐級傳遞數(shù)據(jù)相比舰蟆，它們能實(shí)現(xiàn)組件跨級傳遞數(shù)據(jù)。InheritedWidget的在widget樹中數(shù)據(jù)傳遞方向是從上到下的狸棍，這和通知Notification的傳遞方向正好相反身害。

didChangeDependencies
我們知道StatefulWidget的State對象有一個(gè)didChangeDependencies回調(diào)，它會在“依賴”發(fā)生變化時(shí)被Flutter Framework調(diào)用草戈。而這個(gè)“依賴”指的就是子Widget是否使用了父Widget中InheritedWidget的數(shù)據(jù)塌鸯。

• 如果使用了，則代表子widget依賴有依賴InheritedWidget
• 如果沒有使用則代表沒有依賴
  這種機(jī)制可以使子組件在所依賴的InheritedWidget變化時(shí)來更新自身唐片。比如當(dāng)主題丙猬、locale（語言）等發(fā)生變化時(shí)涨颜，依賴其的子Widget的didChangeDependencies方法將會被調(diào)用。

下面用InheriteWidget去實(shí)現(xiàn)計(jì)數(shù)器demo：
首先茧球，我們通過繼承InheriteWidget庭瑰，將當(dāng)前計(jì)數(shù)器點(diǎn)擊次數(shù)保存在ShareDataWidget的data屬性中：

class ShareDataWidget extends InheritedWidget {
  ShareDataWidget({
    @required this.data,
    Widget child
  }) :super(child: child);

  final int data; //需要在子樹中共享的數(shù)據(jù)，保存點(diǎn)擊次數(shù)

  //定義一個(gè)便捷方法抢埋，方便子樹中的widget獲取共享數(shù)據(jù)  
  static ShareDataWidget of(BuildContext context) {
    return context.inheritFromWidgetOfExactType(ShareDataWidget);
  }

  //該回調(diào)決定當(dāng)data發(fā)生變化時(shí)弹灭，是否通知子樹中依賴data的Widget  
  @override
  bool updateShouldNotify(ShareDataWidget old) {
    //如果返回true，則子樹中依賴(build函數(shù)中有調(diào)用)本widget
    //的子widget的`state.didChangeDependencies`會被調(diào)用
    return old.data != data;
  }
}

然后我們實(shí)現(xiàn)一個(gè)子組件_TestWidget揪垄，在其build方法中引用ShareDataWidget中的數(shù)據(jù)穷吮。同時(shí)，在其didChangeDependencies() 回調(diào)中打印日志：

class _TestWidget extends StatefulWidget {
  @override
  __TestWidgetState createState() => new __TestWidgetState();
}

class __TestWidgetState extends State<_TestWidget> {
  @override
  Widget build(BuildContext context) {
    //使用InheritedWidget中的共享數(shù)據(jù)
    return Text(ShareDataWidget
        .of(context)
        .data
        .toString());
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    //父或祖先widget中的InheritedWidget改變(updateShouldNotify返回true)時(shí)會被調(diào)用饥努。
    //如果build中沒有依賴InheritedWidget捡鱼，則此回調(diào)不會被調(diào)用。
    print("Dependencies change");
  }
}

最后酷愧，我們創(chuàng)建一個(gè)按鈕堰汉，每點(diǎn)擊一次，就將ShareDataWidget的值自增：

class InheritedWidgetTestRoute extends StatefulWidget {
  @override
  _InheritedWidgetTestRouteState createState() => new _InheritedWidgetTestRouteState();
}

class _InheritedWidgetTestRouteState extends State<InheritedWidgetTestRoute> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return  Center(
      child: ShareDataWidget( //使用ShareDataWidget
        data: count,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(bottom: 20.0),
              child: _TestWidget(),//子widget中依賴ShareDataWidget
            ),
            RaisedButton(
              child: Text("Increment"),
              //每點(diǎn)擊一次伟墙，將count自增，然后重新build,ShareDataWidget的data將被更新  
              onPressed: () => setState(() => ++count),
            )
          ],
        ),
      ),
    );
  }
}

運(yùn)行結(jié)果如下圖所示:

image.png

每點(diǎn)擊一次按鈕滴铅，計(jì)數(shù)器就會自增戳葵，控制臺就會打印一句日志：

I/flutter ( 8513): Dependencies change

可見依賴發(fā)生變化后，其didChangeDependencies()會被調(diào)用汉匙。
但是要注意拱烁，如果 _TestWidget的build方法中沒有使用ShareDataWidget的數(shù)據(jù)，那么它的didChangeDependencies()將不會調(diào)用噩翠，因?yàn)樗]有依賴ShareDataWidget戏自。
例如，我們將__TestWidgetState代碼改為下面這樣伤锚，didChangeDependencies()將不會調(diào)用:

class __TestWidgetState extends State<_TestWidget> {
  @override
  Widget build(BuildContext context) {
    // 使用InheritedWidget中的共享數(shù)據(jù)
    //    return Text(ShareDataWidget
    //        .of(context)
    //        .data
    //        .toString());
     return Text("text");
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // build方法中沒有依賴InheritedWidget擅笔，此回調(diào)不會被調(diào)用。
    print("Dependencies change");
  }
}

上面的代碼中屯援，我們將build()方法中依賴ShareDataWidget的代碼注釋掉了猛们，然后返回一個(gè)固定Text，這樣一來狞洋，當(dāng)點(diǎn)擊Increment按鈕后弯淘，SharedDataWidget的data雖然發(fā)生變化，但是由于__TestWidgetState并未依賴ShareDataWidget吉懊，所以__TestWidgetState的didChangeDependencies方法不會被調(diào)用庐橙。其實(shí)假勿，這個(gè)機(jī)制很好理解，因?yàn)樵跀?shù)據(jù)發(fā)生變化時(shí)只對使用該數(shù)據(jù)的Widget更新是合理并且性能友好的态鳖。

應(yīng)該在didChangeDependencies()中做什么转培？
一般來說，子widget很少會重寫此方法郁惜，因?yàn)樵谝蕾嚫淖兒骹ramework也都會調(diào)用build()方法堡距。但是，如果你需要在依賴改變后執(zhí)行一些昂貴的操作兆蕉，比如網(wǎng)絡(luò)請求羽戒，這時(shí)，最好的方式就是在此方法中執(zhí)行虎韵，這樣可以避免每次build()都執(zhí)行這些昂貴操作易稠。

下面有個(gè)問題：Flutter framework是怎么知道子Widget有沒有依賴InheritedWidget的？

深入了解下InheritedWidget
現(xiàn)在來思考一下包蓝，如果我們只想在__TestWidgetState中引用ShareDataWidget數(shù)據(jù)驶社，但卻不希望在ShareDataWidget發(fā)生變化時(shí)調(diào)用__TestWidgetState的didChangeDependencies()方法應(yīng)該怎么辦？其實(shí)很簡單测萎，我們只需要將ShareDataWidget.of()的實(shí)現(xiàn)改一下就行了：

//定義一個(gè)便捷方法亡电，方便子樹中的widget獲取共享數(shù)據(jù)
static ShareDataWidget of(BuildContext context) {
  //return context.inheritFromWidgetOfExactType(ShareDataWidget);
  return context.ancestorInheritedElementForWidgetOfExactType(ShareDataWidget).widget;
}

唯一的改動就是獲取ShareDataWIdget對象的方法，把inheritFromWidgetOfExactType()方法換成了 context.ancestorInheritedElementForWidgetOfExacType(ShareDataWidget).widget硅瞧，那么他們到底有什么區(qū)別呢份乒？我們看一下這兩個(gè)方法的源碼（實(shí)現(xiàn)代碼在Element類中）

為什么在Element類中? 因?yàn)锽uildContext實(shí)際上就是Element。

@override
InheritedElement ancestorInheritedElementForWidgetOfExactType(Type targetType) {
  final InheritedElement ancestor = _inheritedWidgets == null ? null :  _inheritedWidgets[targetType];
  return ancestor;
}

@override
InheritedWidget inheritFromWidgetOfExactType(Type targetType, { Object aspect }) {
  final InheritedElement ancestor = _inheritedWidgets == null ? null :   _inheritedWidgets[targetType];
  //多出的部分
  if (ancestor != null) {
    assert(ancestor is InheritedElement);
    return inheritFromElement(ancestor, aspect: aspect);
  }
  _hadUnsatisfiedDependencies = true;
  return null;
}

我們可以看到腕唧，inheritFromWidgetOfExactType()比ancesgtorInheritedElementForWidgetOfExactType()多調(diào)用了 inheritFromElement方法或辖，inheritFromElement源碼如下：

@override
InheritedWidget inheritFromElement(InheritedElement ancestor, { Object aspect }) {
  //注冊依賴關(guān)系
  _dependencies ??= HashSet<InheritedElement>();
  _dependencies.add(ancestor);
  ancestor.updateDependencies(this, aspect);
  return ancestor.widget;
}

可以看到 inheritFromElement 方法中主要是注冊了依賴關(guān)系，會在inheritFromElement中存入依賴它的其它的element枣接，當(dāng)數(shù)據(jù)變更時(shí)颂暇，會遍歷通知到其它的element，調(diào)用其didChangeDependencies方法但惶。

調(diào)用inheritFromWidgetOfExactType（）和ancestorInheritedElementForWidgetOfExactType（）的區(qū)別就是前者會注冊依賴關(guān)系耳鸯，而后者不會，所以在調(diào)用inheritFromWidgetOfExactType（）時(shí)膀曾，InheritedWidget和依賴它的子孫組件關(guān)系便完成了注冊片拍，之后當(dāng)InheritedWidget發(fā)生變化時(shí)，就會更新依賴它的子孫組件妓肢，也就是會調(diào)用這些子孫組件的didChangeDependencies()方法和build()方法捌省。而當(dāng)調(diào)用的是ancestorInheritedElementForWidgetOfExactType()時(shí)，由于沒有注冊依賴關(guān)系碉钠，所以之后當(dāng)InheritedWidget發(fā)生變化時(shí)纲缓，就不會更新相應(yīng)的子孫Widget卷拘。

注意，如果將上面示例中ShareDataWidget.of() 方法實(shí)現(xiàn)改成調(diào)用ancestorInheritedElementForWidgetOfExactType()祝高，運(yùn)行示例后栗弟，點(diǎn)擊“Increment”按鈕，會發(fā)現(xiàn)__TestWidgetState的didChangeDependencies()方法確實(shí)不會再被調(diào)用工闺，但是其build（）仍然會被調(diào)用乍赫。
造成這個(gè)原因其實(shí)是，點(diǎn)擊“Increment”按鈕后陆蟆，會調(diào)用_InheritedWidgetTestRouteState的setState() 方法雷厂，此時(shí)會重新構(gòu)建整個(gè)頁面，由于示例中叠殷，__TestWidget并沒有任何緩存改鲫，所以它也都會被重新構(gòu)建，所以也會調(diào)用build()方法林束。

那么像棘，此時(shí)有一個(gè)問題，實(shí)際上壶冒，我們只想更新子樹中依賴了ShareDataWidget的組件缕题，而現(xiàn)在只要調(diào)用_InheritedWidgetTestRouteState的setState()方法，所有子節(jié)點(diǎn)都會重新build胖腾，這有點(diǎn)沒必要避除，我們可以通過封裝一個(gè)StatefulWIdget，將子Widget樹緩存起來胸嘁。可以通過實(shí)現(xiàn)一個(gè)Provider Widget 來緩存凉逛，以及利用InheritedWidget 來實(shí)現(xiàn)Flutter全局狀態(tài)共享性宏。