您好

經(jīng)過一段時間的接觸，和項目的不斷迭代，不得不用一些手段來控制Widget的狀態(tài)，對于大多數(shù)剛接觸Flutter的人，知道如何更新Flutter組件的方式無非就是setState，還在某些論壇或者官網(wǎng)上看到InheritedWidget這個東東，那他們是如何更新的UI呢？這期我們不談InheritedWidget，但當(dāng)我點進(jìn)去StreamBuilder里看到它繼承自StatefulWidget時，我T..驚了，難道StreamBuilder也是setState？所以接下來，我們一探究竟。

StreamBuilder 源碼

class StreamBuilder<T> extends StreamBuilderBase<T, AsyncSnapshot<T>> {
  /// [stream] 與指定[Streams]的交互快照，
  ///  [builder] 必須傳，構(gòu)建UI
  /// [initialData] 初始化數(shù)據(jù)時用
  /// 創(chuàng)建StreamBuilder對象
  const StreamBuilder({
    Key key,
    this.initialData,
    Stream<T> stream,
    @required this.builder,
  }) : assert(builder != null),
       super(key: key, stream: stream);

  /// 為當(dāng)前對象創(chuàng)建一個異步策略的builder
  final AsyncWidgetBuilder<T> builder;

  /// 抽象這個主要是因為數(shù)據(jù)是異步的，
  /// 需要一個初始值用于顯示。
  final T initialData;

  @override
  AsyncSnapshot<T> initial() => AsyncSnapshot<T>.withData(ConnectionState.none, initialData);

  @override
  AsyncSnapshot<T> afterConnected(AsyncSnapshot<T> current) => current.inState(ConnectionState.waiting);

  @override
  AsyncSnapshot<T> afterData(AsyncSnapshot<T> current, T data) {
    return AsyncSnapshot<T>.withData(ConnectionState.active, data);
  }

  @override
  AsyncSnapshot<T> afterError(AsyncSnapshot<T> current, Object error) {
    return AsyncSnapshot<T>.withError(ConnectionState.active, error);
  }

  @override
  AsyncSnapshot<T> afterDone(AsyncSnapshot<T> current) => current.inState(ConnectionState.done);

  @override
  AsyncSnapshot<T> afterDisconnected(AsyncSnapshot<T> current) => current.inState(ConnectionState.none);

  @override
  Widget build(BuildContext context, AsyncSnapshot<T> currentSummary) => builder(context, currentSummary);
}

這里觀察到四個關(guān)鍵的類

• StreamBuilderBase<T, AsyncSnapshot<T>>
• AsyncWidgetBuilder<T>
• AsyncSnapshot<T>
• Stream<T>
  都是什么鬼，我也不知道，我們往下看，接下來一個個分析下

StreamBuilderBase<T, AsyncSnapshot<T>>

StreamBuilder的基類，StreamBuilderBase使用了泛型

• T 就是我們定義的數(shù)據(jù)類型
• S 從上面可以看到它的實現(xiàn)是AsyncSnapshot<T>，為什么用AsyncSnapshot包一層呢，一會我們看下AsyncSnapshot到底是干嘛的就明白了。接著往下看，可以直接看源碼注釋：

abstract class StreamBuilderBase<T, S> extends StatefulWidget {
  /// 構(gòu)造函數(shù)，主要接收Stream流
  const StreamBuilderBase({ Key key, this.stream }) : super(key: key);

  /// 這里需要注意的是，有可能為空，因為我們有可能不傳，我有個疑問，如果不傳的話，UI處理什么呢？
  final Stream<T> stream;

   /// 我們結(jié)合子類的實現(xiàn) 
   /// AsyncSnapshot<T>.withData(ConnectionState.none, initialData)
   /// 返回了AsyncSnapshot的函數(shù)withData，并設(shè)置當(dāng)前的AsyncSnapshot快照的狀態(tài)為ConnectionState.none，并傳入我們的初始化數(shù)據(jù)initialData
  S initial();

  /// 返回 current.inState(ConnectionState.waiting)，改狀態(tài)為waiting
  S afterConnected(S current) => current;

  /// 返回 AsyncSnapshot<T>.withData(ConnectionState.active, data)
  /// 改變連接狀態(tài)active，并更新數(shù)據(jù)data
  S afterData(S current, T data);

  /// 返回 AsyncSnapshot<T>.withError(ConnectionState.active, error);
  /// 通知前端有錯誤
  S afterError(S current, Object error) => current;

  /// 返回current.inState(ConnectionState.done)，改變狀態(tài)done
  S afterDone(S current) => current;

  /// current.inState(ConnectionState.none) ，改變狀態(tài)none
  S afterDisconnected(S current) => current;

  /// 返回 builder(context, currentSummary) 
  /// 其實這里就是我們實現(xiàn)的builder代碼
  Widget build(BuildContext context, S currentSummary);

  @override
  State<StreamBuilderBase<T, S>> createState() => _StreamBuilderBaseState<T, S>();
}

這里發(fā)現(xiàn)都是一些抽象函數(shù)，被StreamBuilder都逐個實現(xiàn)了，目的很清晰，抽象的函數(shù)都是對AsyncSnapshot<T>的操作，從初始化到更新再到斷開。不難猜出，其實AsyncSnapshot就是對我們傳入的數(shù)據(jù)T的一個包裝類，用來記錄并控制數(shù)據(jù)的狀態(tài)，角色類似我們網(wǎng)絡(luò)請求中BaseResponse<T>的存在，是不是很像。接下來到重點了，來看看StreamBuilder如何操作的AsyncSnapshot。來看下代碼

_StreamBuilderBaseState類

大致流程：
在 initState 、didUpdateWidget 中會調(diào)用 _subscribe 方法，從而調(diào)用 Stream 的 listen，然后通過 setState 更新UI

/// State for [StreamBuilderBase].
class _StreamBuilderBaseState<T, S> extends State<StreamBuilderBase<T, S>> {
  StreamSubscription<T> _subscription;
  S _summary;

  @override
  void initState() {
    super.initState();
    _summary = widget.initial();
    _subscribe();
  }

  @override
  void didUpdateWidget(StreamBuilderBase<T, S> oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.stream != widget.stream) {
      if (_subscription != null) {
        _unsubscribe();
        _summary = widget.afterDisconnected(_summary);
      }
      _subscribe();
    }
  }

  @override
  Widget build(BuildContext context) => widget.build(context, _summary);

  @override
  void dispose() {
    _unsubscribe();
    super.dispose();
  }

  void _subscribe() {
    if (widget.stream != null) {
      _subscription = widget.stream.listen((T data) {
        setState(() {
          _summary = widget.afterData(_summary, data);
        });
      }, onError: (Object error) {
        setState(() {
          _summary = widget.afterError(_summary, error);
        });
      }, onDone: () {
        setState(() {
          _summary = widget.afterDone(_summary);
        });
      });
      _summary = widget.afterConnected(_summary);
    }
  }

  void _unsubscribe() {
    if (_subscription != null) {
      _subscription.cancel();
      _subscription = null;
    }
  }
}

這里又出現(xiàn)了一個新角色 StreamSubscription ，請看_subscribe函數(shù)就知道是個什么了，

_subscription = widget.stream.listen

它就是Stream流的訂閱者 Subscription，嗯，到這里我也明白了，Stream是一個觀察者，而流里面的數(shù)據(jù)就是通過listen函數(shù)添加一個監(jiān)聽，
當(dāng)Stream里的數(shù)據(jù)發(fā)生相應(yīng)的變化，然后通知_subscription訂閱者。
我們再往下看，

_subscription = widget.stream.listen((T data) {
        setState(() {
          _summary = widget.afterData(_summary, data);
        });
      }, onError: (Object error) {
        setState(() {
          _summary = widget.afterError(_summary, error);
        });
      }, onDone: () {
        setState(() {
          _summary = widget.afterDone(_summary);
        });
      });
      _summary = widget.afterConnected(_summary);
    }

看到了吧，setState出現(xiàn)了，還真是，我擦。這里根據(jù)Stream流的實現(xiàn)去調(diào)用StreamBuilder中實現(xiàn)的afterData，afterError，afterDone等函數(shù)。
分析完StreamBuilderBase，發(fā)現(xiàn)不用往下分析了，因為全清晰了，那我們來總結(jié)一下

總結(jié)

StreamBuilder其實就是包裝了Stream流、還有對數(shù)據(jù)T包裝的AsyncSnapshot快照，在Statefulwiget合適的生命周期，初始化，綁定Stream流的監(jiān)聽，并在生命結(jié)束的時候自動解綁，Stream流是一個生產(chǎn)者消費(fèi)者模型，但數(shù)據(jù)是通過觀察者模式通知的，最關(guān)鍵的是數(shù)據(jù)還是通過setState更新。
總結(jié)幾點：

• StreamBuilder 并沒有什么實質(zhì)性的性能提升( 它的提升其實來源于局部刷新，它做到了子widget的單獨(dú)刷新)
• StreamBuilder 也是一個Statefulwidget，等于是增加了一層嵌套。
• StreamBuilder 很像是VM的角色，建議使用，一個簡單的MVVM架構(gòu)就這么實現(xiàn)了。