Flutter - 深入理解setState更新机制

亚瑟 等级 706 0 0
标签: flutter移动端

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

widgets/framework.dart
widgets/binding.dart
scheduler/binding.dart
lib/ui/window.dart
flutter/runtime/runtime_controller.cc 

一、概述

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

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

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

二、Widget更新流程

2.1 setState

[-> framework.dart:: State]

abstract class State<T extends StatefulWidget> extends Diagnosticable {
  StatefulElement _element;

  void setState(VoidCallback fn) {
    ...
    _element.markNeedsBuild();  //[见小节2.2]
  }
} 

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

2.2 markNeedsBuild

[-> framework.dart:: Element]

abstract class Element extends DiagnosticableTree implements BuildContext {
  void markNeedsBuild() {
    if (!_active)
      return;
    if (dirty)
      return;
    _dirty = true;
    owner.scheduleBuildFor(this);   //[见小节2.3]
  }
} 

设置_dirty为true,

2.3 scheduleBuildFor

[-> framework.dart:: BuildOwner]

void scheduleBuildFor(Element element) {
  if (element._inDirtyList) {
    _dirtyElementsNeedsResorting = true;
    return;
  }
  if (!_scheduledFlushDirtyElements && onBuildScheduled != null) {
    _scheduledFlushDirtyElements = true;
    onBuildScheduled();  //[见小节2.4]
  }
  _dirtyElements.add(element);  //记录所有的脏元素
  element._inDirtyList = true;
} 

2.4 _handleBuildScheduled

[-> binding.dart:: WidgetsBinding]

mixin WidgetsBinding on BindingBase, SchedulerBinding, GestureBinding, RendererBinding, SemanticsBinding {
  @override
  void initInstances() {
    super.initInstances();
    _instance = this;
    buildOwner.onBuildScheduled = _handleBuildScheduled;   //赋值onBuildScheduled
    ui.window.onLocaleChanged = handleLocaleChanged;
    ui.window.onAccessibilityFeaturesChanged = handleAccessibilityFeaturesChanged;
    SystemChannels.navigation.setMethodCallHandler(_handleNavigationInvocation);
    SystemChannels.system.setMessageHandler(_handleSystemMessage);
  }

  void _handleBuildScheduled() {
    ensureVisualUpdate();  //[见小节2.5]
  }
} 

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

2.5 ensureVisualUpdate

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

mixin SchedulerBinding on BindingBase, ServicesBinding {
  @override
  void initInstances() {
    super.initInstances();
    _instance = this;
    ui.window.onBeginFrame = _handleBeginFrame;
    ui.window.onDrawFrame = _handleDrawFrame;
    SystemChannels.lifecycle.setMessageHandler(_handleLifecycleMessage);
  }

  void ensureVisualUpdate() {
    switch (schedulerPhase) {
      case SchedulerPhase.idle:
      case SchedulerPhase.postFrameCallbacks:
        scheduleFrame();  //[见小节2.6]
        return;
      case SchedulerPhase.transientCallbacks:
      case SchedulerPhase.midFrameMicrotasks:
      case SchedulerPhase.persistentCallbacks:
        return;
    }
  }
} 

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

状态 含义
idle 没有正在处理的帧,可能正在执行的是WidgetsBinding.scheduleTask,scheduleMicrotask,Timer,事件handlers,或者其他回调等
transientCallbacks SchedulerBinding.handleBeginFrame过程, 处理动画状态更新
midFrameMicrotasks 处理transientCallbacks阶段触发的微任务(Microtasks)
persistentCallbacks WidgetsBinding.drawFrame和SchedulerBinding.handleDrawFrame过程,build/layout/paint流水线工作
postFrameCallbacks 主要是清理和计划执行下一帧的工作

2.6 scheduleFrame

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

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

2.7 scheduleFrame

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

void scheduleFrame() native 'Window_scheduleFrame'; 

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

2.7.1 ScheduleFrame(C++)

[-> window.cc ]

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

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

2.7.2 RuntimeController::ScheduleFrame

[flutter/runtime/runtime_controller.cc]

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

2.7.3 Engine::ScheduleFrame

flutter/shell/common/engine.cc

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

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

2.8 Window::BeginFrame

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

void Window::BeginFrame(fml::TimePoint frameTime) {
  std::shared_ptr<tonic::DartState> dart_state = library_.dart_state().lock();
  if (!dart_state)
    return;
  tonic::DartState::Scope scope(dart_state);

  int64_t microseconds = (frameTime - fml::TimePoint()).ToMicroseconds();

  // [见小节4.2]
  DartInvokeField(library_.value(), "_beginFrame",
                  {
                      Dart_NewInteger(microseconds),
                  });

  //执行MicroTask
  UIDartState::Current()->FlushMicrotasksNow();

  // [见小节4.4]
  DartInvokeField(library_.value(), "_drawFrame", {});
} 

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

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

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

2.9 handleBeginFrame

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

void handleBeginFrame(Duration rawTimeStamp) {
  Timeline.startSync('Frame', arguments: timelineWhitelistArguments);
  _firstRawTimeStampInEpoch ??= rawTimeStamp;
  _currentFrameTimeStamp = _adjustForEpoch(rawTimeStamp ?? _lastRawTimeStamp);
  if (rawTimeStamp != null)
    _lastRawTimeStamp = rawTimeStamp;

  profile(() {
    _profileFrameNumber += 1;
    _profileFrameStopwatch.reset();
    _profileFrameStopwatch.start();
  });

  //此时阶段等于SchedulerPhase.idle;
  _hasScheduledFrame = false;
  try {
    Timeline.startSync('Animate', arguments: timelineWhitelistArguments);
    _schedulerPhase = SchedulerPhase.transientCallbacks;
    //执行动画的回调方法
    final Map<int, _FrameCallbackEntry> callbacks = _transientCallbacks;
    _transientCallbacks = <int, _FrameCallbackEntry>{};
    callbacks.forEach((int id, _FrameCallbackEntry callbackEntry) {
      if (!_removedIds.contains(id))
        _invokeFrameCallback(callbackEntry.callback, _currentFrameTimeStamp, callbackEntry.debugStack);
    });
    _removedIds.clear();
  } finally {
    _schedulerPhase = SchedulerPhase.midFrameMicrotasks;
  }
} 

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

2.10 handleDrawFrame

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

void handleDrawFrame() {
  assert(_schedulerPhase == SchedulerPhase.midFrameMicrotasks);
  Timeline.finishSync(); // 标识结束"Animate"阶段
  try {
    _schedulerPhase = SchedulerPhase.persistentCallbacks;
    //执行PERSISTENT FRAME回调
    for (FrameCallback callback in _persistentCallbacks)
      _invokeFrameCallback(callback, _currentFrameTimeStamp);

    _schedulerPhase = SchedulerPhase.postFrameCallbacks;
    // 执行POST-FRAME回调
    final List<FrameCallback> localPostFrameCallbacks = List<FrameCallback>.from(_postFrameCallbacks);
    _postFrameCallbacks.clear();
    for (FrameCallback callback in localPostFrameCallbacks)
      _invokeFrameCallback(callback, _currentFrameTimeStamp);
  } finally {
    _schedulerPhase = SchedulerPhase.idle;
    Timeline.finishSync(); //标识结束”Frame“阶段
    profile(() {
      _profileFrameStopwatch.stop();
      _profileFramePostEvent();
    });
    _currentFrameTimeStamp = null;
  }
} 

该方法主要功能:

  • 遍历_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/,如有侵权,请联系删除。

收藏
评论区

相关推荐

带你全面了解 Flutter,它好在哪里?它的坑在哪里? 应该怎么学?
回顾了这段时间解答关于 Flutter 的各种问题后,我突然发现很多刚刚接触 Flutter 的萌新,对于 Flutter 都有着不同程度的误解,而每次重复的解释又十分浪费时间,最终我还是决定写篇文章来做个总结。 内容有点长,但是相信能帮你更好地去认识 Flutter 。 Flutter 的起源 Flutter 的诞生其实比较有意思,Flutter
可以用Flutter愉快的开发web 了
简单的试了一下,完全用flutter现有的widget进行开发。github上面有说现在是preview版本,有些widget还不能用。但是最终是会支持整个的flutter现有的UI的。 跟用flutter开发原生app一样。flutter_web还有很长的一段路要走。希望年底能出个像样的版本。 不支持第三方库说明 目前pub.da
Flutter 移动应用开发指南
Flutter 移动应用开发指南 Flutter 作为新一代的跨平台 UI 框架,已经在 Android 和 iOS 移动平台被广泛使用,未来还会进一步扩展到 Web、桌面和嵌入式等平台。只要编写一次代码,就可处处运行,真正做到了全屏制霸。本文将通过从零开发一个类似抖音的短视频应用来展示 Flutter 应用的完整开发过程,以及它的强大性和易用性。
Flutter 2.0 下混合开发浅析
多余的前言 Flutter 2.0 发布时,其中最受大家关注之一的内容就是 AddtoApp 相关的更新,因为除了热更新之外,Flutter 最受大家诟病的就是混合开发体验不好。 为什么不好呢?因为 Flutter 的控件渲染直接脱离了原生平台,也就是无论页面堆栈和渲染树都独立于平台运行,这固然给 Flutter 带来了较好的跨平台体验
【Flutter实战】初识Flutter
1.2 初识Flutter 1.2.1 Flutter简介Flutter 是 Google推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App,一套代码同时运行在 iOS 和 Android平台。 Flutter提供了丰富的组件、接口,开发者可以很快地为 Flutter添加 native扩展。同时 Flu
【Flutter 实战】安装Flutter
1.3 搭建Flutter开发环境工欲善其事必先利其器,本节首先会分别介绍一下在Windows和macOS下Flutter SDK的安装,然后再介绍一下配IDE和模拟器的使用。 1.3.1 安装Flutter由于Flutter会同时构建Android和IOS两个平台的发布包,所以Flutter同时依赖Android SDK和iOS SDK,在安装Fl
【Flutter实战】调试Flutter应用
2.5 调试Flutter应用有各种各样的工具和功能来帮助调试Flutter应用程序。 Dart 分析器在运行应用程序前,请运行flutter analyze测试你的代码。这个工具是一个静态代码检查工具,它是dartanalyzer工具的一个包装,主要用于分析代码并帮助开发者发现可能的错误,比如,Dart分析器大量使用了代码中的类型注释来帮
【Flutter实战】调试Flutter应用
2.5 调试Flutter应用有各种各样的工具和功能来帮助调试Flutter应用程序。 Dart 分析器在运行应用程序前,请运行flutter analyze测试你的代码。这个工具是一个静态代码检查工具,它是dartanalyzer工具的一个包装,主要用于分析代码并帮助开发者发现可能的错误,比如,Dart分析器大量使用了代码中的类型注释来帮
解读 Flutter 全平台开发的误解与偏见
Flutter 2.0 发布之后,Web 版本进入了 stable 分支,Desktop 版本也可以在 stable 分支通过 snapshot beta 镜像开始预览使用,导致最近关于 “Flutter 制霸全平台” 之类的话题又被炒作起来,所以本篇主要对这个话题做一次解答。1、Flutter 制霸全平台谷歌官方在 F
Flutter - 深入理解setState更新机制
基于Flutter 1.5的源码剖析, 分析flutter的StatefulWidget的UI更新机制,相关源码:widgets/framework.dartwidgets/binding.dartscheduler/binding.dartlib/ui/window.dartflutter/runtime/runtime_controller.c
Flutter - 深入理解Flutter动画原理
基于Flutter 1.5,从源码视角来深入剖析flutter动画原理,相关源码目录见文末附录一、概述动画效果对于系统的用户体验非常重要,好的动画能让用户感觉界面更加顺畅,提升用户体验。 1.1 动画类型Flutter动画大的分类来说主要分为两大类: 补间动画:给定初值与终值,系统自动补齐中间帧的动画 物理动画:遵循物理学定律
Flutter - 深入理解Flutter应用启动
基于Flutter 1.5,从源码视角来深入剖析flutter应用的启动流程,相关源码目录见文末附录一、概述上一篇文章 已经介绍了FlutterApplication和FlutterActivity的onCreate()方法执行过程, 并触发Flutter引擎的启动,并最终执行到runApp(Widget app)方法,这才刚刚开始执行dart的
Flutter - 深入理解Flutter引擎启动
基于Flutter 1.5,从源码视角来深入剖析flutter引擎的启动流程,相关源码目录见文末附录一、Flutter引擎启动工作 1.1 Flutter启动概览Flutter作为一款跨平台的框架,可以运行在Android、iOS等平台,Android为例讲解如何从Android应用启动流程中衔接到Flutter框架,
Flutter - Flutter渲染机制—GPU线程
基于Flutter 1.5,从源码视角来深入剖析flutter渲染机制,相关源码目录见文末附录一、GPU线程渲染看Flutter的渲染绘制过程的核心过程包括在ui线程和gpu线程,上一篇文章已经详细介绍了UI线程的工作原理, 本文则介绍GPU线程的工作原理,这里需要注意的是,gpu线程是指运行着GPU Task Runner的名叫gpu
字节跳动为什么选用Flutter:并非跨平台终极之选,但它可能是不一样的未来
2018 年 12 月 ,Google 宣布 Flutter 1.0 版本正式发布。截至目前, Flutter 在 Github 上已获得 88000+ 的关注和 11000+ 的 Fork ,其发展速度相当惊人,是今年移动端最火热的开发框架之一。Flutter 大火背后的原因是什么?为什么越来越多的企业和开发者会选择使用 Flutter?Flutter 会