作为一名移动端开发工程师，刚接触 Flutter 的时候，一定会有这样的疑问：Flutter 的生命周期是怎么样的？是如何处理生命周期的？我的 onCreate()[Android] 在哪里？viewDidLoad()[iOS] 呢？ 我的业务逻辑应该放在哪里处理？初始化数据呢？希望看了这篇文章后，可以对你有一点小小的帮助。

安卓

如果你是一名安卓开发工程师，那么对于 Activity 生命周期肯定不陌生

• onCreate


• onStart


• onResume


• onPause


• onStop


• onDestroy

iOS

如果你是一名 iOS 开发工程师，那么 UIViewController 的生命周期肯定也已经很了解了。

• viewDidLoad


• viewWillAppear


• viewDidAppear


• viewWillDisappear


• viewDidDisappear


• viewDidUnload

Flutter

知道了 Android 和 iOS 的生命周期，那么 Flutter 呢？有和移动端对应的生命周期函数么？如果之前你对 Flutter 有一点点了解的话，你会发现 Flutter 中有两个主要的 Widget：StatelessWidget（无状态） 和 StatefulWidget（有状态）。本篇文章我们主要来介绍下 StatefulWidget，因为它有着和 Android 和 iOS 相似的生命周期。

StatelessWidget

无状态组件是不可变的，这意味着它们的属性不能变化，所有的值都是最终的。可以理解为将外部传入的数据转化为界面展示的内容，只会渲染一次。
对于无状态组件生命周期只有 build 这个过程。无状态组件的构建方法通常只在三种情况下会被调用：小组件第一次被插入树中，小组件的父组件改变其配置，以及它所依赖的 InheritedWidget 发生变化时。

StatefulWidget

有状态组件持有的状态可能在 Widget 生命周期中发生变化，是定义交互逻辑和业务逻辑。可以理解为具有动态可交互的内容界面，会根据数据的变化进行多次渲染。实现一个 StatefulWidget 至少需要两个类：

• 一个是 StatefulWidget 类。


• 另一个是 Sate 类。StatefulWidget 类本身是不可变的，但是 State 类在 Widget 生命周期中始终存在。StatefulWidget 将其可变的状态存储在由 createState 方法创建的 State 对象中，或者存储在该 State 订阅的对象中。

StatefulWidget 生命周期

• createState：该函数为 StatefulWidget 中创建 State 的方法，当 StatefulWidget 被创建时会立即执行 createState。createState 函数执行完毕后表示当前组件已经在 Widget 树中，此时有一个非常重要的属性 mounted 被置为 true。


• initState：该函数为 State 初始化调用，只会被调用一次，因此，通常会在该回调中做一些一次性的操作，如执行 State 各变量的初始赋值、订阅子树的事件通知、与服务端交互，获取服务端数据后调用 setState 来设置 State。


• didChangeDependencies：该函数是在该组件依赖的 State 发生变化时会被调用。这里说的 State 为全局 State，例如系统语言 Locale 或者应用主题等，Flutter 框架会通知 widget 调用此回调。类似于前端 Redux 存储的 State。该方法调用后，组件的状态变为 dirty，立即调用 build 方法。


• build：主要是返回需要渲染的 Widget，由于 build 会被调用多次，因此在该函数中只能做返回 Widget 相关逻辑，避免因为执行多次而导致状态异常。


• reassemble：主要在开发阶段使用，在 debug 模式下，每次热重载都会调用该函数，因此在 debug 阶段可以在此期间增加一些 debug 代码，来检查代码问题。此回调在 release 模式下永远不会被调用。


• didUpdateWidget：该函数主要是在组件重新构建，比如说热重载，父组件发生 build 的情况下，子组件该方法才会被调用，其次该方法调用之后一定会再调用本组件中的 build 方法。


• deactivate：在组件被移除节点后会被调用，如果该组件被移除节点，然后未被插入到其他节点时，则会继续调用 dispose 永久移除。


• dispose：永久移除组件，并释放组件资源。调用完 dispose 后，mounted 属性被设置为 false，也代表组件生命周期的结束。

不是生命周期但是却非常重要的几个概念

下面这些并不是生命周期的一部分，但是在生命周期中起到了很重要的作用。

• mounted：是 State 中的一个重要属性，相当于一个标识，用来表示当前组件是否在树中。在 createState 后 initState 前，mounted 会被置为 true，表示当前组件已经在树中。调用 dispose 时，mounted 被置为 false，表示当前组件不在树中。


• dirty：表示当前组件为脏状态，下一帧时将会执行 build 函数，调用 setState 方法或者执行 didUpdateWidget 方法后，组件的状态为 dirty。


• clean：与 dirty 相对应，clean 表示组件当前的状态为干净状态，clean 状态下组件不会执行 build 函数。

上图为 flutter 生命周期流程图

大致分为四个阶段

1. 初始化阶段，包括两个生命周期函数 createState 和 initState；


2. 组件创建阶段，包括 didChangeDependencies 和 build；


3. 触发组件多次 build ，这个阶段有可能是因为 didChangeDependencies、 setState 或者 didUpdateWidget 而引发的组件重新 build ，在组件运行过程中会多次触发，这也是优化过程中需要着重注意的点；


4. 最后是组件销毁阶段，deactivate 和 dispose。

组件首次加载执行过程

首先我们来实现下面这段代码（类似于 flutter 自己的计数器项目），康康组件首次创建是否按照上述流程图中的顺序来执行的。

1. 创建一个 flutter 项目；


2. 创建 count_widget.dart 中添加以下代码；

import 'package:flutter/material.dart';



class CountWidget extends StatefulWidget {

  CountWidget({Key key}) : super(key: key);



  @override

  _CountWidgetState createState() {

    print('count createState');

    return _CountWidgetState();

  }

}



class _CountWidgetState extends State<CountWidget> {

  int _count = 0;

  void _incrementCounter() {

    setState(() {

      print('count setState');

      _count++;

    });

  }



  @override

  void initState() {

    print('count initState');

    super.initState();

  }



  @override

  void didChangeDependencies() {

    print('count didChangeDependencies');

    super.didChangeDependencies();

  }



  @override

  void didUpdateWidget(CountWidget oldWidget) {

    print('count didUpdateWidget');

    super.didUpdateWidget(oldWidget);

  }



  @override

  void deactivate() {

    print('count deactivate');

    super.deactivate();

  }



  @override

  void dispose() {

    print('count dispose');

    super.dispose();

  }



  @override

  void reassemble() {

    print('count reassemble');

    super.reassemble();

  }



  @override

  Widget build(BuildContext context) {

    print('count build');

    return Center(

      child: Column(

        mainAxisAlignment: MainAxisAlignment.center,

        children: <Widget>[

          Text(

            '$_count',

            style: Theme.of(context).textTheme.headline4,

          ),

          Padding(

            padding: EdgeInsets.only(top: 100),

            child: IconButton(

              icon: Icon(

                Icons.add,

                size: 30,

              ),

              onPressed: _incrementCounter,

            ),

          ),

        ],

      ),

    );

  }

}

上述代码把 StatefulWidget 的一些生命周期都进行了重写，并且在执行中都打印了标识，方便看到函数的执行顺序。

3. 在 main.dart 中加载该组件。代码如下：

import 'package:flutter/material.dart';



import './pages/count_widget.dart';



class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter Demo',

      theme: ThemeData(

        primarySwatch: Colors.blue,

        visualDensity: VisualDensity.adaptivePlatformDensity,

      ),

      home: MyHomePage(title: 'Flutter Demo Home Page'),

    );

  }

}



class MyHomePage extends StatefulWidget {

  MyHomePage({Key key, this.title}) : super(key: key);



  final String title;



  @override

  _MyHomePageState createState() {

    return _MyHomePageState();

  }

}



class _MyHomePageState extends State<MyHomePage> {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text(widget.title),

      ),

      body: CountWidget(),

    );

  }

}

这时 CountWidget 作为 MyHomePage 的子组件。我们打开模拟器，开始运行。在控制台可以看到如下日志，可以看出 StatefulWidget 在第一次被创建的时候是调用下面四个函数。

flutter: count createState

flutter: count initState

flutter: count didChangeDependencies

flutter: count build

点击屏幕上的 ➕ 按钮，_count 增加 1，模拟器上的数字由 0 变为 1，日志如下。也就是说在状态发生变化的时候，会调用 setState 和 build 两个函数。

flutter: count setState

flutter: count build

command + s 热重载后，日志如下：

flutter: count reassemble

flutter: count didUpdateWidget

flutter: count build

注释掉 main.dart 中的 CountWidget，command + s 热重载后，这时 CountWidget 消失在模拟器上，日志如下：

class _MyHomePageState extends State<MyHomePage> {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text(widget.title),

      ),

      // body: CountWidget(),

    );

  }

}

flutter: count reassemble

flutter: count deactivate

flutter: count dispose

经过上述一系列操作之后，通过日志打印并结合生命周期流程图，我们可以很清晰的看出各生命周期函数的作用以及理解生命周期的几个阶段。
相信很多细心的同学已经发现了一个细节，那就是 build 方法在不同的操作中都被调用了，下面我们来介绍什么情况下会触发组件再次 build。

触发组件再次 build

触发组件再次 build 的方式有三种，分别是 setState、didChangeDependencies、didUpdateWidget。

1.setState 很好理解，只要组件状态发生变化时，就会触发组件 build。在上述的操作过程中，点击 ➕ 按钮，_count 会加 1，结果如下图：

2.didChangeDependencies，组件依赖的全局 state 发生了变化时，也会调用 build。例如系统语言等、主题色等。

3.didUpdateWidget，我们以下方代码为例。在 main.dart 中，同样的重写生命周期函数，并打印。在 CountWidget 外包一层 Column ，并创建同级的 RaisedButton 做为父 Widget 中的计数器。

class MyHomePage extends StatefulWidget {

  MyHomePage({Key key, this.title}) : super(key: key);



  final String title;



  @override

  _MyHomePageState createState() {

    print('main createState');

    return _MyHomePageState();

  }

}



class _MyHomePageState extends State<MyHomePage> {

  int mainCount = 0;



  void _changeMainCount() {

    setState(() {

      print('main setState');

      mainCount++;

    });

  }



  @override

  void initState() {

    print('main initState');

    super.initState();

  }



  @override

  void didChangeDependencies() {

    print('main didChangeDependencies');

    super.didChangeDependencies();

  }



  @override

  void didUpdateWidget(MyHomePage oldWidget) {

    print('main didUpdateWidget');

    super.didUpdateWidget(oldWidget);

  }



  @override

  void deactivate() {

    print('main deactivate');

    super.deactivate();

  }



  @override

  void dispose() {

    print('main dispose');

    super.dispose();

  }



  @override

  void reassemble() {

    print('main reassemble');

    super.reassemble();

  }



  @override

  Widget build(BuildContext context) {

    print('main build');

    return Scaffold(

      appBar: AppBar(

        title: Text(widget.title),

      ),

      body: Column(

        children: <Widget>[

          RaisedButton(

            onPressed: () => _changeMainCount(),

            child: Text('mainCount = $mainCount'),

          ),

          CountWidget(),

        ],

      ),

    );

  }

}

重新加载 app，可以看到打印日志如下：

flutter: main createState

flutter: main initState

flutter: main didChangeDependencies

flutter: main build

flutter: count createState

flutter: count initState

flutter: count didChangeDependencies

flutter: count build

可以发现：

• 父组件也经历了 createState、 initState、 didChangeDependencies、 build 这四个过程。


• 并且父组件要在 build 之后才会创建子组件。

点击 MyHomePage（父组件）的 mainCount 按钮 ，打印如下：

flutter: main setState

flutter: main build

flutter: count didUpdateWidget

flutter: count build

点击 CountWidget 的 ➕ 按钮，打印如下：

flutter: count setState

flutter: count build

可以说明父组件的 State 变化会引起子组件的 didUpdateWidget 和 build，子组件自己的状态变化不会引起父组件的状态改变。

组件销毁

我们重复上面的操作，为 CountWidget 添加一个子组件 CountSubWidget，并用 count sub 前缀打印日志。重新加载 app。

注释掉 CountWidget 中的 CountSubWidget，打印日志如下：

flutter: main reassemble

flutter: count reassemble

flutter: count sub reassemble

flutter: main didUpdateWidget

flutter: main build

flutter: count didUpdateWidget

flutter: count build

flutter: count sub deactivate

flutter: count sub dispose

恢复到注释前，注释掉 MyHomePage 中的 CountWidget，打印如下：

flutter: main reassemble

flutter: count reassemble

flutter: count sub reassemble

flutter: main didUpdateWidget

flutter: main build

flutter: count deactivate

flutter: count sub deactivate

flutter: count sub dispose

flutter: count dispose

因为是热重载，所以会调用 reassemble、 didUpdateWidget、 build，我们可以忽略带有这几个函数的打印日志。可以得出结论：
父组件移除，会先移除节点，然后子组件移除节点，子组件被永久移除，最后是父组件被永久移除。

Flutter App Lifecycle

上面我们介绍的生命周期主要是 StatefulWidget 组件的生命周期，下面我们来简单介绍一下和 app 平台相关的生命周期，比如退出到后台。

我们创建 app_lifecycle_state.dart 文件并创建 AppLifecycle，他是一个 StatefulWidget，但是他要继承 WidgetsBindingObserver。

import 'package:flutter/material.dart';



class AppLifecycle extends StatefulWidget {

  AppLifecycle({Key key}) : super(key: key);



  @override

  _AppLifecycleState createState() {

    print('sub createState');

    return _AppLifecycleState();

  }

}



class _AppLifecycleState extends State<AppLifecycle>

    with WidgetsBindingObserver {

  @override

  void initState() {

    super.initState();

    WidgetsBinding.instance.addObserver(this);

    print('sub initState');

  }



  @override

  void didChangeAppLifecycleState(AppLifecycleState state) {

    // TODO: implement didChangeAppLifecycleState

    super.didChangeAppLifecycleState(state);

    print('didChangeAppLifecycleState');

    if (state == AppLifecycleState.resumed) {

      print('resumed：');

    } else if (state == AppLifecycleState.inactive) {

      print('inactive');

    } else if (state == AppLifecycleState.paused) {

      print('paused');

    } else if (state == AppLifecycleState.detached) {

      print('detached');

    }

  }



  @override

  Widget build(BuildContext context) {

    print('sub build');

    return Container(

      child: Text('data'),

    );

  }

}

didChangeAppLifecycleState 方法是重点，AppLifecycleState 中的状态包括：resumed、inactive、paused、detached 四种。

didChangeAppLifecycleState 方法的依赖于系统的通知（notifications），正常情况下，App是可以接收到这些通知，但有个别情况下是无法接收到通知的，比如用户关机等。它的四种生命周期状态枚举源码中有详细的介绍和说明，下面附上源码以及简单的翻译说明。

• resumed：该应用程序是可见的，并对用户的输入作出反应。也就是应用程序进入前台。


• inactive：应用程序处于非活动状态，没有接收用户的输入。在 iOS 上，这种状态对应的是应用程序或 Flutter 主机视图在前台非活动状态下运行。当处于电话呼叫、响应 TouchID 请求、进入应用切换器或控制中心时，或者当 UIViewController 托管的 Flutter 应用程序正在过渡。在 Android 上，这相当于应用程序或 Flutter 主机视图在前台非活动状态下运行。当另一个活动被关注时，如分屏应用、电话呼叫、画中画应用、系统对话框或其他窗口，应用会过渡到这种状态。也就是应用进入后台。


• pause：该应用程序目前对用户不可见，对用户的输入没有反应，并且在后台运行。当应用程序处于这种状态时，引擎将不会调用。也就是说应用进入非活动状态。


• detached：应用程序仍然被托管在flutter引擎上，但与任何主机视图分离。处于此状态的时机：引擎首次加载到附加到一个平台 View 的过程中，或者由于执行 Navigator pop，view 被销毁。

除了 app 生命周期的方法，Flutter 还有一些其他不属于生命周期，但是也会在一些特殊时机被观察到的方法，如 didChangeAccessibilityFeatures（当前系统改变了一些访问性活动的回调） 、didHaveMemoryPressure（低内存回调）、didChangeLocales（用户本地设置变化时调用，如系统语言改变）、didChangeTextScaleFactor（文字系数变化） 等，如果有兴趣的话，可以去试一试。

总结

本篇文章主要介绍了 Widget 中的 StatefulWidget 的生命周期，以及 Flutter App 相关的生命周期。但是要切记，StatefulWidget 虽好，但也不要无脑的所有 Widget 全都用它，能使用 StatelessWidget 还是要尽量去使用 StatelessWidget（仔细想一下，这是为什么呢？）。好啦，看完本篇文章，你就是 Flutter 初级开发工程师了，可以去面试了（狗头保命）。

最后

真正坚持到最后的人，往往靠的不是短暂的激情，而是恰到好处的喜欢和投入。你还那么年轻，完全可以成为任何你想要成为的样子！

功能说明

• 新手引导高亮蒙层


• 图片进度条

使用说明

Import the packages:

import 'package:flutter_mask_view/flutter_mask_view.dart';

show height-light mask for newer:

 Scaffold(

      body: Stack(

        children: [

          //only display background for demo

          Image.asset(ImagesRes.BG_HOME),

          

          //config

          HeightLightMaskView(

            //控件大小

            maskViewSize: Size(720, 1080),

            //蒙层颜色

            backgroundColor: Colors.blue.withOpacity(0.6),

            //高亮区域颜色

            color: Colors.transparent,

            //设置高亮区域形状，如果width = height = radius 为圆形，否则矩形

            rRect: RRect.fromRectAndRadius(

              Rect.fromLTWH(100, 100, 50, 50),

              Radius.circular(50),

            ),

          )

        ],

      ),

    )

more:

          HeightLightMaskView(

            maskViewSize: Size(720, 1080),

            backgroundColor: Colors.blue.withOpacity(0.6),

            color: Colors.transparent,

            //自定义蒙层区域形状

            pathBuilder: (Size size) {

              return Path()

                ..moveTo(100, 100)

                ..lineTo(50, 150)

                ..lineTo(150, 150);

            },

            //在蒙层上自定义绘制内容

            drawAfter: (Canvas canvas, Size size) {

              Paint paint = Paint()

                ..color = Colors.red

                ..strokeWidth = 15

                ..style = PaintingStyle.stroke;

              canvas.drawCircle(Offset(150, 150), 50, paint);

            },

            //是否重绘，默认return false, 如果使用动画，此返回true

            rePaintDelegate: (CustomPainter oldDelegate){

              return false;

            },

          )

Display

create image progress bar:

      ImageProgressMaskView(

          size: Size(360, 840),

          //进度图片

          backgroundRes: 'images/bg.png',

          //当前进度

          progress: 0.5,

          //蒙层形状，内置以下两种蒙层：

          //矩形蒙层：PathProviders.sRecPathProvider

          //水波蒙层(可配置水波高度和密度)：PathProviders.createWaveProvider

          

          //自定义进度蒙层

          pathProvider: PathProviders.createWaveProvider(60, 100),

        ),

      )

PathProviders.sRecPathProvider:

PathProviders.createWaveProvider:

与动画联动:

class _MaskTestAppState extends State<MaskTestApp>

    with SingleTickerProviderStateMixin {

  late AnimationController _controller;



  @override

  void initState() {

    _controller =

        AnimationController(duration: Duration(seconds: 5), vsync: this);

    _controller.forward();

    super.initState();

  }



  @override

  void dispose() {

    _controller.dispose();

    super.dispose();

  }



  @override

  Widget build(BuildContext context) {

    return Scaffold(

      backgroundColor: Colors.black,

      body: Center(

        child: AnimatedBuilder(

          animation: _controller,

          builder: (context, child) {

            return Stack(

              alignment: Alignment.center,

              children: [

                ImageProgressMaskView(

                  size: Size(300, 300),

                  backgroundRes: ImagesRes.IMG,

                  progress: _controller.value,

                  pathProvider: PathProviders.createWaveProvider(60, 40),

                  rePaintDelegate: (_) => true,

                ),

                Text(

                  '${(_controller.value * 100).toInt()} %',

                  style: TextStyle(

                    color: Colors.red,

                    fontWeight: FontWeight.bold,

                    fontSize: 30,

                  ),

                )

              ],

            );

          },

        ),

      ),

    );

  }

}

Result:

case 1:

case 2: (png)

仓库地址

PUB

Github

2022年3月29号，React18正式版发布。

从v16开始，React团队就在普及并发的概念。在v18的迭代过程中（alpha、Beta、RC），也一直在科普并发特性，所以正式版发布时，已经没有什么新鲜特性。

本文主要讲解v18发布日志中透露的一些未来发展趋势。

欢迎加入人类高质量前端框架研究群，带飞

开发者可能并不会接触到并发特性

React对增加API是很慎重的。从13年诞生至今，触发更新的方式都是this.setState。

而引入并发概念后，光是与并发相关的API就有好几个，比如：

• useTransition

• useDeferredValue

甚至出现了为并发兜底的API（即并发情况下，不使用这些API可能会出bug），比如：

• useSyncExternalStore

• useInsertionEffect

一下多出这么多API，还不是像useState这种不使用不行的API，况且，并发这一特性对于多数前端开发者都有些陌生。

你可以代入自己的业务想想，让开发者上手使用并发特性有多难。

所以，在未来用v18开发的应用，开发者可能并不会接触到并发特性。这些特性更可能是由各种库封装好的。

比如：startTransition可以让用户在不同视图间切换的同时，不阻塞用户输入。

这一API很可能会由各种Router实现，再作为一个配置项开放给开发者。

万物皆可Suspense

对于React来说，有两类瓶颈需要解决：

• CPU的瓶颈，如大计算量的操作导致页面卡顿

• IO的瓶颈，如请求服务端数据时的等待时间

其中CPU的瓶颈通过并发特性的优先级中断机制解决。

IO的瓶颈则交给Suspense解决。

所以，未来一切与IO相关的操作，都会收敛到Suspense这一解决方案内。

从最初的React.lazy到如今仍在开发中的Server Components，最终万物皆可Suspense。

这其中有些逻辑是很复杂的，比如：

• Server Components

• 新的服务端渲染方案

所以，这些操作不大可能是直接面向开发者的。

这又回到了上一条，这些操作会交由各种库实现。如果复杂度更高，则会交由基于React封装的框架实现，比如Next.js、Remix。

这也是为什么React团队核心人物Sebastian会加入Next.js。

可以说，React未来的定位是：一个前端底层操作系统，足够复杂，一般开发者慎用。

而开发者使用的是基于该操作系统实现的各种上层应用。

总结

如果说v16之前各种React Like库还能靠体积、性能优势分走React部分蛋糕，那未来两者走的完全是两条赛道，因为两者的生态不再兼容。

未来不再会有React全家桶的概念，桶里的各个部件最终会沦为更大的框架中的一个小模块。

当前你们业务里是直接使用React呢，还是使用各种框架（比如Next.js）？

各位亲爱的环友们～

环信技术社区及官方支持群自组建以来涌现了不少不分昼夜，互帮互助，无私帮助他人解决问题的热心网友，看似不经意的“顺手答一下”“刚好遇到过”，于被帮助的人都是雪中炭,暗室灯,绝渡舟的存在～～为鼓励这些默默发光的环友同时壮大帮帮团队伍，环信推出“𠈌”计划。

“𠈌”计划以传递人人为我，我为人人的开发者互助精神为目标，将程序员自由开放和共享精神发扬光大。赠人玫瑰，手有余香，帮助他人沉淀自己的技术力量，现诚邀广大开发者积极加入！

包括但不限于在技术社区和官方支持群里解答IM集成及以外的所有开发问题。

从四月开始，每月底在本社区和技术支持群（环信官方技术支持群1、2、3）分别选出3～5名当月积极帮助他人解决问题的网友（非环信员工）给予一定的福利奖励。同时把Ta送上环信月度优秀群友墙～！颁发优秀环友徽章一枚，自本月起，累计上墙次数超过3次的环友们将拥有神秘的年度大奖～

 福利奖励标准 

IMGeek论坛：积极回复每月新发问题（集成问题，开发问题，bug解决等），帮助坛友解决问题——回帖总条数top5

技术支持群：受企业微信群统计功能限制，每月由以下各群内的环信支持小哥哥小姐姐们提名。

*以上暂为每月评选标准，评选方式后期会慢慢优化，以更客观数据为依据，贯彻公平公正的原则，坚持获选者0争议0质疑的宗旨，众望所归。
*环信员工不参与以上排名或提名。


 福利大礼包 

环信礼包：含环信定制周边、月优秀环友徽章、京东卡、其他随机盲盒。

“每月优秀环友”在次月10日前揭晓并发放奖励。

如果您特别了解环信IM集成及相关问题解答，欢迎加入答疑方队。

想加入官方技术支持群的朋友，请联系环信冬冬通过审核后进群。

前言
跟我学flutter系列：
跟我学flutter：我们来举个例子通俗易懂讲解dart 中的 mixin
跟我学flutter：我们来举个例子通俗易懂讲解异步（一）ioslate
跟我学flutter：我们来举个例子通俗易懂讲解异步（二）ioslate循环机制
企业级篇目：
跟我学企业级flutter项目：用bloc手把手教你搭建用户认证系统
跟我学企业级flutter项目：dio网络框架增加公共请求参数&header
跟我学企业级flutter项目：如何用dio封装一套企业级可扩展高效的网络层
跟我学企业级flutter项目：如何封装一套易用，可扩展的Hybrid混合开发webview
跟我学企业级flutter项目：手把手教你制作一款低耦合空页面widget

我们在开发flutter应用的时候编写代码，要么是同步代码，要么是异步代码。那么什么是同步什么是异步呢？

• 同步代码就是正常编写的代码块
• 异步代码就是Future，async等关键字修饰的代码块

一、时机不同

他们区别于运行时机不同，同步代码先执行，异步代码后执行，即使你的同步代码写在最后，那也是你的同步代码执行，之后运行你的异步代码。

二、机制不同

异步代码运行在 event loop中，类似于Android里的Looper机制，是一个死循环，event loop不断的从事件队列里取事件然后运行。

event loop循环机制

如图所示，事件存放于队列中，loop循环执行  Dart的事件循环如下图所示。循环中有两个队列。一个是微任务队列（MicroTask queue），一个是事件队列(Event queue)。  事件队列包含外部事件，例如I/O, Timer，绘制事件等等。 微任务队列则包含有Dart内部的微任务，主要是通过scheduleMicrotask来调度。

1. 首先处理所有微任务队列里的微任务。
2. 处理完所有微任务以后。从事件队列里取1个事件进行处理。
3. 回到微任务队列继续循环。

Dart要先把所有的微任务处理完，再处理一个事件，处理完之后再看看微任务队列。如此循环。

例子：

8个微任务

2个事件



Dart-->执行完8个微任务

Dart-->执行完1个事件

Dart-->查看微任务队列

Dart-->再执行完1个事件

done

异步执行

那么在Dart中如何让你的代码异步执行呢？很简单，把要异步执行的代码放在微任务队列或者事件队列里就行了。

可以调用scheduleMicrotask来让代码以微任务的方式异步执行

    scheduleMicrotask((){

        print('a microtask');

    });

可以调用Timer.run来让代码以Event的方式异步执行

   Timer.run((){

       print('a event');

   });

Future异步执行

创建一个立刻在事件队列里运行的Future:

Future(() => print('立刻在Event queue中运行的Future'));

创建一个延时1秒在事件队列里运行的Future:

Future.delayed(const Duration(seconds:1), () => print('1秒后在Event queue中运行的Future'));

创建一个在微任务队列里运行的Future:

Future.microtask(() => print('在Microtask queue里运行的Future'));

创建一个同步运行的Future：

Future.sync(() => print('同步运行的Future'));

这里要注意一下，这个同步运行指的是构造Future的时候传入的函数是同步运行的，这个Future通过then串进来的回调函数是调度到微任务队列异步执行的。

有了Future之后, 通过调用then来把回调函数串起来，这样就解决了"回调地狱"的问题。

Future(()=> print('task'))

    .then((_)=> print('callback1'))

    .then((_)=> print('callback2'));

在task打印完毕以后，通过then串起来的回调函数会按照链接的顺序依次执行。 如果task执行出错怎么办？你可以通过catchError来链上一个错误处理函数：

 Future(()=> throw 'we have a problem')

      .then((_)=> print('callback1'))

      .then((_)=> print('callback2'))

      .catchError((error)=>print('$error'));

上面这个Future执行时直接抛出一个异常，这个异常会被catchError捕捉到。类似于Java中的try/catch机制的catch代码块。运行后只会执行catchError里的代码。两个then中的代码都不会被执行。

既然有了类似Java的try/catch，那么Java中的finally也应该有吧。有的，那就是whenComplete:

Future(()=> throw 'we have a problem')

    .then((_)=> print('callback1'))

    .then((_)=> print('callback2'))

    .catchError((error)=>print('$error'))

    .whenComplete(()=> print('whenComplete'));

无论这个Future是正常执行完毕还是抛出异常，whenComplete都一定会被执行。

结果执行

把如上的代码在dart中运行看看输出

 print('1');

                var fu1 = Future(() => print('立刻在Event queue中运行的Future'));

                Future future2 = new Future((){

                  print("future2 初始化任务");

                });

                print('2');

                Future.delayed(const Duration(seconds:1), () => print('1秒后在Event queue中运行的Future'));

                print('3');

                var fu2 = Future.microtask(() => print('在Microtask queue里运行的Future'));

                print('4');

                Future.sync(() => print('同步运行的Future')).then((value) => print('then同步运行的Future'));

                print('5');

                fu1.then((value) => print('then 立刻在Event queue中运行的Future'));

                print('6');

                fu2.then((value) => print('then 在Microtask queue里运行的Future'));

                print('7');

                Future(()=> throw 'we have a problem')

                    .then((_)=> print('callback1'))

                    .then((_)=> print('callback2'))

                    .catchError((error)=>print('$error'));

                print('8');

                Future(()=> throw 'we have a problem')

                    .then((_)=> print('callback1'))

                    .then((_)=> print('callback2'))

                    .catchError((error)=>print('$error'))

                    .whenComplete(()=> print('whenComplete'));

                print('9');

                Future future4 = Future.value("立即执行").then((value){

                  print("future4 执行then");

                }).whenComplete((){

                  print("future4 执行whenComplete");

                });

                print('10');





                future2.then((_) {

                  print("future2 执行then");

                  future4.then((_){

                    print("future4 执行then2");

                  });



                });

输出

I/flutter (29040): 1

I/flutter (29040): 2

I/flutter (29040): 3

I/flutter (29040): 4

I/flutter (29040): 同步运行的Future

I/flutter (29040): 5

I/flutter (29040): 6

I/flutter (29040): 7

I/flutter (29040): 8

I/flutter (29040): 9

I/flutter (29040): 10

I/flutter (29040): 在Microtask queue里运行的Future

I/flutter (29040): then 在Microtask queue里运行的Future

I/flutter (29040): then同步运行的Future

I/flutter (29040): future4 执行then

I/flutter (29040): future4 执行whenComplete

I/flutter (29040): 立刻在Event queue中运行的Future

I/flutter (29040): then 立刻在Event queue中运行的Future

I/flutter (29040): future2 初始化任务

I/flutter (29040): future2 执行then

I/flutter (29040): future4 执行then2

I/flutter (29040): we have a problem

I/flutter (29040): we have a problem

I/flutter (29040): whenComplete

I/flutter (29040): 1秒后在Event queue中运行的Future

输出说明：

• 先输出同步代码，再输出异步代码
• 通过then串联起的任务会在主要任务执行完立即执行
• Future.sync是同步执行，then执行在微任务队列中
• 通过Future.value()函数创建的任务是立即执行的
• 如果是在whenComplete之后注册的then，那么这个then的任务将放在microtask执行

Completer

Completer允许你做某个异步事情的时候，调用c.complete(value)方法来传入最后要返回的值。最后通过c.future的返回值来得到结果，（注意：宣告完成的complete和completeError方法只能调用一次，不然会报错）。 例子：

test() async {

    Completer c = new Completer();

    for (var i = 0; i < 1000; i++) {

      if (i == 900 && c.isCompleted == false) {

        c.completeError('error in $i');

      }

      if (i == 800 && c.isCompleted == false) {

        c.complete('complete in $i');

      }

    }



    try {

      String res = await c.future;

      print(res); //得到complete传入的返回值 'complete in 800'

    } catch (e) {

      print(e);//捕获completeError返回的错误

    }

  }

跟我学flutter系列：
跟我学flutter：我们来举个例子通俗易懂讲解dart 中的 mixin
跟我学flutter：我们来举个例子通俗易懂讲解异步（一）ioslate
跟我学flutter：我们来举个例子通俗易懂讲解异步（二）ioslate循环机制
企业级篇目：
跟我学企业级flutter项目：用bloc手把手教你搭建用户认证系统
跟我学企业级flutter项目：dio网络框架增加公共请求参数&header
跟我学企业级flutter项目：如何用dio封装一套企业级可扩展高效的网络层
跟我学企业级flutter项目：如何封装一套易用，可扩展的Hybrid混合开发webview
跟我学企业级flutter项目：手把手教你制作一款低耦合空页面widget