【每日 widget】 Flutter InheritedWidget

InheritedWidget 介绍

InheritedWidget 可以让 child 共享数据。

每个 Widget 生成的 Element 挂载到 Element Tree 上的时候都会调用 mount方法，mount 方法会调用_updateInheritance方法。

void _updateInheritance() {
    assert(_lifecycleState == _ElementLifecycle.active);
    _inheritedWidgets = _parent?._inheritedWidgets;
  }
复制代码

非 InheritedElement 直接传递 _parent 的 _inheritedWidgets

void _updateInheritance() {
    assert(_lifecycleState == _ElementLifecycle.active);
    final Map<Type, InheritedElement>? incomingWidgets = _parent?._inheritedWidgets;
    if (incomingWidgets != null) {
      _inheritedWidgets = HashMap<Type, InheritedElement>.of(incomingWidgets);
    } else {
      _inheritedWidgets = HashMap<Type, InheritedElement>();
    }
    _inheritedWidgets![widget.runtimeType] = this;
  }
复制代码

InheritedElement copy _parent 的 _inheritedWidgets 做为独产的一份保留起来。为什么要 copy一份呢，是为了实现这样的效果：InheritedElement 只影响他的 child，不会影响到 parent。如果不 copy 的话，就会影响到 parent 了。所以 child 只会找到离他最近的 InheritedElement。

如果只是想获取数据，不触发更新，用 getElementForInheritedWidgetOfExactType，否则用 dependOnInheritedWidgetOfExactType。

dependOnInheritedWidgetOfExactType 同时会注册依赖的 element，方便后续更新。

总结一下

• 在当前组件的 mount 和 activate 阶段，系统调用  _updateInheritance 方法，将 InheritedWidget 类型的父组件添加到  _inheritedWidgets 集合中。
• 子组件执行 dependOnInheritedWidgetOfExactType 方法时，从  _inheritedWidgets 集合中获取指定 InheritedWidget 类型的父组件，并将当前组件注册到 InheritedWidget 类型父组件的  _dependents 集合中。
• InheritedWidget 组件数据发生变化（updateShouldNotify 方法返回true），重建时，InheritedWidget 组件遍历  _dependents 集合中所有依赖的子组件，执行子组件的 didChangeDependencies 的方法。

使用 InheritedWidget

InheritedWidget 用处就是可以让 child 获得到共享数据。至于 触发 didChangeDependencies 这个逻辑 一般情况下用不到。更新 InheritedWidget 数据可以用 setState 的方式，但是这样会导致整棵树都更新。 有两种办法可以避免整体更新。

1. 用 const 关键字修改 child。但这种做法并不能总是可以成功，因为child 可能不可以被 const 修饰。
2. 提升不需要 rebuild的 child 到 InheritedWidget 父级。

我们可以把 InheritedWidget 的 data 换成 ValueNotifier，当数据变化的时候直接修改值，监听 data 的 widget 才会更新，其它 widget 不会更新。

触发 didChangeDependencies 的意义

使用 InheritedWidget 的过程中我们发现，要么 setState，鉵发全体更新，要么不用 setState ，用 ValueNotifier 触发。那么 InheritedWidget 特意触发 didChangeDependencies 有什么意义呢？

意义在于当依赖的数据变化时，需要进行一个耗时操作或异步操作，这个操作不适合放在 build 方法里。那么放在 didChangeDependencies 就是唯一的选择。

InheritedWidget 的孩子们

• InheritedNotifier。他的作用是当 value 变化的时候自动rebuild 。rebuild 跳过了 widget 的 rebuild，直接 rebuild  element ，算是优化吧。但是会整体 rebuild ，不能选择 subTree rebuild。
• InheritedModel。他的作用是可以选择 rebuild  subtree。rebuild 的时候是连 widget 一起 rebbuild 的。但是他的 rebuild 优化 是有条件的，child 必须加 const 关键字，否则所有 child 都会 rebuild。

方案讨论

其实页面不是很复杂的情况下，整体 rebuild 也没什么问题，只要不是很频繁，可以用 InheritedNotifier 。如果有一部分变化非常频繁，可以考虑用 InheritedModel。但只能控制到 model 相关的子树，子树往下可能会全部 rebuild。

要想精确控制可以把 InheritedWidget 的数据换成 ValueNotifier。InheritedWidget 的作用仅仅是传递 ValueNotifier，不会主动触发 rebuild。需要 rebuild 的地方自行监听 ValueNotifier，这样就可以做到精准 rebuild 了。ValueNotifier 的值可以是简单的 int ，也可以是自定义的类。如果是自定义的类会更灵活些。child 可以修改数据， 修改过的数据可以在整个 InheritedWidget 树中共享。