Flutter - 深入理解setState更新机制

基于Flutter 1.5的源码剖析， 分析flutter的StatefulWidget的UI更新机制，相关源码：

1widgets/framework.dart
2widgets/binding.dart
3scheduler/binding.dart
4lib/ui/window.dart
5flutter/runtime/runtime_controller.cc 

一、概述

对于Flutter来说，万物皆为Widget，常见的Widget子类为StatelessWidget(无状态)和StatefulWidget(有状态)；

• StatelessWidget：内部没有保存状态，界面创建后不会发生改变；
• StatefulWidget：内部有保存状态，当状态发生改变，调用setState()方法会触发StatefulWidget的UI发生更新，对于自定义继承自StatefulWidget的子类，必须要重写createState()方法。

接下来看看setState()究竟干了哪些操作。

二、Widget更新流程

2.1 setState

[-> framework.dart:: State]

1abstract class State<T extends StatefulWidget> extends Diagnosticable {
2  StatefulElement _element;
3
4  void setState(VoidCallback fn) {
5    ...
6    _element.markNeedsBuild();  //[见小节2.2]
7  }
8} 

这里需要注意setState()不应该在dispose()之后调用，可通过mounted属性值来判断父widget是否还包含该widget。

2.2 markNeedsBuild

[-> framework.dart:: Element]

1abstract class Element extends DiagnosticableTree implements BuildContext {
2  void markNeedsBuild() {
3    if (!_active)
4      return;
5    if (dirty)
6      return;
7    _dirty = true;
8    owner.scheduleBuildFor(this);   //[见小节2.3]
9  }
10} 

设置_dirty为true，

2.3 scheduleBuildFor

[-> framework.dart:: BuildOwner]

1void scheduleBuildFor(Element element) {
2  if (element._inDirtyList) {
3    _dirtyElementsNeedsResorting = true;
4    return;
5  }
6  if (!_scheduledFlushDirtyElements && onBuildScheduled != null) {
7    _scheduledFlushDirtyElements = true;
8    onBuildScheduled();  //[见小节2.4]
9  }
10  _dirtyElements.add(element);  //记录所有的脏元素
11  element._inDirtyList = true;
12} 

2.4 _handleBuildScheduled

[-> binding.dart:: WidgetsBinding]

1mixin WidgetsBinding on BindingBase, SchedulerBinding, GestureBinding, RendererBinding, SemanticsBinding {
2  @override
3  void initInstances() {
4    super.initInstances();
5    _instance = this;
6    buildOwner.onBuildScheduled = _handleBuildScheduled;   //赋值onBuildScheduled
7    ui.window.onLocaleChanged = handleLocaleChanged;
8    ui.window.onAccessibilityFeaturesChanged = handleAccessibilityFeaturesChanged;
9    SystemChannels.navigation.setMethodCallHandler(_handleNavigationInvocation);
10    SystemChannels.system.setMessageHandler(_handleSystemMessage);
11  }
12
13  void _handleBuildScheduled() {
14    ensureVisualUpdate();  //[见小节2.5]
15  }
16} 

在Flutter应用启动过程初始化WidgetsBinding时，赋值onBuildScheduled等于_handleBuildScheduled()。

2.5 ensureVisualUpdate

[-> scheduler/binding.dart:: SchedulerBinding]

1mixin SchedulerBinding on BindingBase, ServicesBinding {
2  @override
3  void initInstances() {
4    super.initInstances();
5    _instance = this;
6    ui.window.onBeginFrame = _handleBeginFrame;
7    ui.window.onDrawFrame = _handleDrawFrame;
8    SystemChannels.lifecycle.setMessageHandler(_handleLifecycleMessage);
9  }
10
11  void ensureVisualUpdate() {
12    switch (schedulerPhase) {
13      case SchedulerPhase.idle:
14      case SchedulerPhase.postFrameCallbacks:
15        scheduleFrame();  //[见小节2.6]
16        return;
17      case SchedulerPhase.transientCallbacks:
18      case SchedulerPhase.midFrameMicrotasks:
19      case SchedulerPhase.persistentCallbacks:
20        return;
21    }
22  }
23} 

schedulerPhase的初始值为SchedulerPhase.idle。SchedulerPhase是一个enum枚举类型，有以下5个可取值：

2.6 scheduleFrame

[-> scheduler/binding.dart:: SchedulerBinding]

1void scheduleFrame() {
2  //只有当APP处于用户可见状态才会准备调度下一帧方法
3  if (_hasScheduledFrame || !_framesEnabled)
4    return;
5  ui.window.scheduleFrame();  // native方法 [见小节2.7]
6  _hasScheduledFrame = true;
7} 

2.7 scheduleFrame

[-> lib/ui/window.dart:: Window]

void scheduleFrame() native 'Window_scheduleFrame'; 

window是Flutter引擎中跟图形相关接口打交道的核心类，这里是一个native方法

2.7.1 ScheduleFrame(C++)

[-> window.cc ]

1void ScheduleFrame(Dart_NativeArguments args) {
2  //  [见小节2.7.2]
3  UIDartState::Current()->window()->client()->ScheduleFrame();
4} 

通过RegisterNatives()完成native方法的注册，“Window_scheduleFrame”所对应的native方法如上所示。

2.7.2 RuntimeController::ScheduleFrame

[flutter/runtime/runtime_controller.cc]

1void RuntimeController::ScheduleFrame() {
2  client_.ScheduleFrame(); //  [见小节2.7.3]
3} 

2.7.3 Engine::ScheduleFrame

flutter/shell/common/engine.cc

1void Engine::ScheduleFrame(bool regenerate_layer_tree) {
2  animator_->RequestFrame(regenerate_layer_tree);
3} 

文章Flutter渲染机制—UI线程文中小节[2.1]介绍Engine::ScheduleFrame()经过层层调用，最终会注册Vsync回调。 等待下一次vsync信号的到来，然后再经过层层调用最终会调用到Window::BeginFrame()。

2.8 Window::BeginFrame

[-> flutter/lib/ui/window/window.cc]

1void Window::BeginFrame(fml::TimePoint frameTime) {
2  std::shared_ptr<tonic::DartState> dart_state = library_.dart_state().lock();
3  if (!dart_state)
4    return;
5  tonic::DartState::Scope scope(dart_state);
6
7  int64_t microseconds = (frameTime - fml::TimePoint()).ToMicroseconds();
8
9  // [见小节4.2]
10  DartInvokeField(library_.value(), "_beginFrame",
11                  {
12                      Dart_NewInteger(microseconds),
13                  });
14
15  //执行MicroTask
16  UIDartState::Current()->FlushMicrotasksNow();
17
18  // [见小节4.4]
19  DartInvokeField(library_.value(), "_drawFrame", {});
20} 

Window::BeginFrame()过程主要工作：

• 执行_beginFrame
• 执行FlushMicrotasksNow
• 执行_drawFrame

可见，Microtask位于beginFrame和drawFrame之间，那么Microtask的耗时会影响ui绘制过程。

2.9 handleBeginFrame

[-> lib/src/scheduler/binding.dart:: SchedulerBinding]

1void handleBeginFrame(Duration rawTimeStamp) {
2  Timeline.startSync('Frame', arguments: timelineWhitelistArguments);
3  _firstRawTimeStampInEpoch ??= rawTimeStamp;
4  _currentFrameTimeStamp = _adjustForEpoch(rawTimeStamp ?? _lastRawTimeStamp);
5  if (rawTimeStamp != null)
6    _lastRawTimeStamp = rawTimeStamp;
7
8  profile(() {
9    _profileFrameNumber += 1;
10    _profileFrameStopwatch.reset();
11    _profileFrameStopwatch.start();
12  });
13
14  //此时阶段等于SchedulerPhase.idle;
15  _hasScheduledFrame = false;
16  try {
17    Timeline.startSync('Animate', arguments: timelineWhitelistArguments);
18    _schedulerPhase = SchedulerPhase.transientCallbacks;
19    //执行动画的回调方法
20    final Map<int, _FrameCallbackEntry> callbacks = _transientCallbacks;
21    _transientCallbacks = <int, _FrameCallbackEntry>{};
22    callbacks.forEach((int id, _FrameCallbackEntry callbackEntry) {
23      if (!_removedIds.contains(id))
24        _invokeFrameCallback(callbackEntry.callback, _currentFrameTimeStamp, callbackEntry.debugStack);
25    });
26    _removedIds.clear();
27  } finally {
28    _schedulerPhase = SchedulerPhase.midFrameMicrotasks;
29  }
30} 

该方法主要功能是遍历_transientCallbacks，执行相应的Animate操作，可通过scheduleFrameCallback()/cancelFrameCallbackWithId()来完成添加和删除成员，再来简单看看这两个方法。

2.10 handleDrawFrame

[-> lib/src/scheduler/binding.dart:: SchedulerBinding]

1void handleDrawFrame() {
2  assert(_schedulerPhase == SchedulerPhase.midFrameMicrotasks);
3  Timeline.finishSync(); // 标识结束"Animate"阶段
4  try {
5    _schedulerPhase = SchedulerPhase.persistentCallbacks;
6    //执行PERSISTENT FRAME回调
7    for (FrameCallback callback in _persistentCallbacks)
8      _invokeFrameCallback(callback, _currentFrameTimeStamp);
9
10    _schedulerPhase = SchedulerPhase.postFrameCallbacks;
11    // 执行POST-FRAME回调
12    final List<FrameCallback> localPostFrameCallbacks = List<FrameCallback>.from(_postFrameCallbacks);
13    _postFrameCallbacks.clear();
14    for (FrameCallback callback in localPostFrameCallbacks)
15      _invokeFrameCallback(callback, _currentFrameTimeStamp);
16  } finally {
17    _schedulerPhase = SchedulerPhase.idle;
18    Timeline.finishSync(); //标识结束”Frame“阶段
19    profile(() {
20      _profileFrameStopwatch.stop();
21      _profileFramePostEvent();
22    });
23    _currentFrameTimeStamp = null;
24  }
25} 

该方法主要功能：

• 遍历_persistentCallbacks，执行相应的回调方法，可通过addPersistentFrameCallback()注册，一旦注册后不可移除，后续每一次frame回调都会执行；
• 遍历_postFrameCallbacks，执行相应的回调方法，可通过addPostFrameCallback()注册，handleDrawFrame()执行完成后会清空_postFrameCallbacks内容。

三、小结

可见，setState()过程主要工作是记录所有的脏元素，添加到BuildOwner对象的_dirtyElements成员变量，然后调用scheduleFrame来注册Vsync回调。 当下一次vsync信号的到来时会执行handleBeginFrame()和handleDrawFrame()来更新UI。

微信公众号 Gityuan | 微博 weibo.com/gityuan | 博客 留言区交流

本文转自 http://gityuan.com/2019/07/06/flutter_set_state/，如有侵权，请联系删除。