Flutter 基础架构、渲染流水线和状态管理

2021-03-24 本文已影响0人犯迷糊的小羊

为什么需要 Flutter

Flutter 通过自建绘制引擎，具备与 Native 相媲美的性能，同时能够磨平平台开发的差异性。

Flutter 架构

Flutter 架构可分为 Dart APP 层、Flutter 框架层、引擎层（面向操作系统的 C++ 引擎以及面前 Web 的 Web 引擎）、平台嵌入层。

Flutter 框架层

Flutter 框架层实现一套基础库用于处理动画、绘图和手势，在这之上 Rendering 层用于组件的底层渲染的结构数据，Widgets 层面向开发者提供一套描述视图结构的语言，并基于绘图封装了两种风格的 UI 组件库

底层引擎层

引擎层可分为 C++ 引擎和 Web 引擎，其中 C++ 引擎包括 Skia 渲染引擎、Dart 运行时以及文字排版引擎等

设计思想

Widget 是视图的基本单元和配置信息

视图以 Widget 为单位，Widget 的状态描述了页面的状态，状态发生变化，Widget 会重新构建 Widget。

Widget 有以下特点：

widget 是不可变的

Flutter 中 widget 重建是频繁发生，因此经常需要进行新旧 widget 树的比较。为了降低比较时间采用浅比较，widget 的 Immutable 特性能够很好契合这一使用场景。只要 widget 发生变化，就会返回一个新的 widget，从旧的 widget 创建一个新的 widget 采用了优化算法，达到快速比较和快速创建的性能

最小颗粒度更新渲染树

Flutter 会比对前后状态的变化，以确定底层渲染树从一个状态切换到下一个状态所需要的最小改变。

渲染流水线

Flutter 渲染视图的本质就是在 Vsync 信号中，通过 UI 线程快速的构建并生成抽象的视图结构数据，并将抽象视图结构数据发送给 GPU 线程，GPU 线程将视图结构数据进行光栅化和上屏；

首先从宏观上理解 Flutter 的渲染流水线：

Flutter 引擎启动时，通过平台线程，向系统注册接收 Vsync 信号的回调
UI 线程接收到 Vsync 信号后，会构建三棵树（widget/element/RenderObject）并生成布局信息，这一工作主要在 Flutter 框架层处理
根据布局信息进行绘制，生成一系列的绘制指令组成 layer tree，这一工作主要在 Flutter 框架层处理
GPU 线程从 UI 线程中获取 layer tree，进行光栅化和上屏操作，这一工作主要在底层引擎层处理
然后请求接收系统下一次的 Vsync 信号，又回到第 2 步

线程模型

理解 Flutter 的渲染流水线，需要先理解 Flutter 的线程模型，Flutter 的四大线程配合来完成渲染 UI 工作：

值得注意的是，Flutter Engine自己不创建管理线程。Flutter Engine线程的创建和管理是由embedder负责的。Embeder指的是将引擎移植到平台的中间层代码。

Platform 线程： Flutter 线程模型中的主线程，负责提供 Native 窗口，作为 GPU 渲染的目标。接受平台的 VSync 信号并发送到 UI 线程，驱动渲染管线运行。
UI 线程：负责 UI 组件管理，维护 3 颗树，Dart VM 管理，UI 渲染指令生成。同时负责把承载渲染指令的 LayerTree 提交给 GPU 线程去光栅化。
GPU 线程：通过 flow 模块完成光栅化，并调用底层渲染 API（opengl/vulkan/meta），合成并输出到屏幕。
IO 线程：包括若干 worker 线程会去请求图片资源并完成图片解码，之后在 IO 线程中生成纹理并上传 GPU ，由于通过和 GPU 线程共享 EGL Context，在 GPU 线程中可以直接使用 IO 线程上传的纹理，通过并行化，提高渲染的性能

UI 线程

当用于描述 UI 的 widget 树发生变化，会触发 build 阶段，build 阶段后会进入 layout 阶段生成 RenderObject tree，layout 完后进入 paint 阶段生成绘制指令 layer tree。

build 阶段

Flutter 对视图结构的抽象描述采用了三棵树：widget tree、element tree 和 render tree。可把它们类比成：

widget tree => jsx
element tree => virtual dom
render tree => rendering tree (dom + cssom)

widget tree

widget tree 是 Dart 代码中所写的组件结构，描述 UI 元素的配置信息，widget 是 immutable 的，如果 widget 的状态发生更新，则会进行重建。实际业务场景中， widget 会频繁进行重建；

element tree

element tree 是 widget 的一种抽象，是视图中真正显示的元素，也是连接 widget tree 和 render tree 的桥梁；

当 widget 挂载到 widget tree 的时候，会调用 widget.createElement() 方法，创建其对应的 Element。Flutter 再将这个 Element 挂载到 element tree 并持有创建它的 widget 的引用

当 widget 发生变化时，会将其 element 标记为 dirty element，在下一次更新视图时根据这个状态只更新被修改的内容，从而提升渲染性能；

element 的更新时机是根据 widget 的两个属性进行的：

widget 的类型，前后组件是否为同一个类所创建
widget key

如果二者都没发生改变，则会复用该 element，并将新的 widget 配置数据更新到 element；

render tree

render tree 是真正进行组件布局渲染的工作，render tree 每个节点都是继承自 RenderObject 类对象，其由 Element 中的 renderObject 或 RenderObjectWidget 的 createRenderObject 方法生成；

布局阶段

UI 线程根据 RenderObject tree 进行布局，具体可分为两个线性过程：从顶部往下传递布局约束，从底部往上传递布局信息：

绘制阶段

UI 线程根据 RenderObject tree 生成绘制指令并形成 layer tree

状态管理

StatefulWidget

Flutter 的 widget 可分为 StatefulWidget 和 StatelessWidget。

stateless widget

stateless widget 没有自己的内部状态，只用于展示从外部传递的或是内部的静态数据
stateful widget

stateful widget 拥有自己的状态用于对外部做出反馈，widget 的状态保存在一个 State 对象中，并通过 setState 去重构 widget

StatefulWidget 的生命周期

当 stateful widget 挂载到 widget 树时，会调用 widget.createState() 方法
新创建的 State 会和 BuildContext（widget 对应的 element）关联，此时 initState 会调用
当 statefulWidget 使用 InheritedWidget 的数据时，并且 InheritedWidget 的 updateShouldNotify() 返回 true 时，说明 statefulWidget 的依赖数据发生变化，因此会触发 didChangeDependencies()
进入 build 阶段构建视图
当 State 暂时从视图树中移除或是页面切换时，该函数就会调用
当 State 被永久从视图树中移除，该函数会调用
当 widget 的配置发生变化时就会调用这个函数，例如 hot-reload
setState 会重新触发 build

理解 setState 的更新机制

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

状态管理机制

widget 自己管理自己的状态

状态是 UI 状态，交由 widget 自身管理
父 widget 管理子 widget 状态

状态是用户数据，交由父 widget 管理
混合管理

widget 间的通信机制

父 widget 向子 widget 通信

通过实例化子 widget 并向子 widget 传值到子 widget 的实例属性
子 widget 向父 widget 通信

通过设置回调函数形式
兄弟组件间通信
- 通过将数据挂载到同一个父组件
- 数据共享的数量较少，使用 InheritedWidget(React Context)

跨组件通信

从上往下

InheritedWidget

class ShareDataWidget extends InheritedWidget {
  ShareDataWidget({
    @required this.data,
    Widget child
  }) :super(child: child);

  final int data; //需要在子树中共享的数据，保存点击次数

  //定义一个便捷方法，方便子树中的widget获取共享数据  
  static ShareDataWidget of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<ShareDataWidget>();
  }

  //该回调决定当data发生变化时，是否通知子树中依赖data的Widget  
  @override
  bool updateShouldNotify(ShareDataWidget old) {
    //如果返回true，则子树中依赖(build函数中有调用)本widget
    //的子widget的`state.didChangeDependencies`会被调用
    return old.data != data;
  }
}

class _TestWidget extends StatefulWidget {
  @override
  __TestWidgetState createState() => new __TestWidgetState();
}

class __TestWidgetState extends State<_TestWidget> {
  @override
  Widget build(BuildContext context) {
    //使用InheritedWidget中的共享数据
    return Text(ShareDataWidget
        .of(context)
        .data
        .toString());
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    //父或祖先widget中的InheritedWidget改变(updateShouldNotify返回true)时会被调用。
    //如果build中没有依赖InheritedWidget，则此回调不会被调用。
    print("Dependencies change");
  }
}

class InheritedWidgetTestRoute extends StatefulWidget {
  @override
  _InheritedWidgetTestRouteState createState() => new _InheritedWidgetTestRouteState();
}

class _InheritedWidgetTestRouteState extends State<InheritedWidgetTestRoute> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return  Center(
      child: ShareDataWidget( //使用ShareDataWidget
        data: count,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(bottom: 20.0),
              child: _TestWidget(),//子widget中依赖ShareDataWidget
            ),
            RaisedButton(
              child: Text("Increment"),
              //每点击一次，将count自增，然后重新build,ShareDataWidget的data将被更新  
              onPressed: () => setState(() => ++count),
            )
          ],
        ),
      ),
    );
  }
}

从下往上

Notification 通知冒泡

class MyNotification extends Notification {
    final String msg;
    Mynotification(this.msg);
}

class NotificationRoute extends StatefulWidget {
    @override
    NotificationRouteState createState() {
        return new NotificationRouteState();
    }
}

class NotificationRouteState extends State<NotificationRoute> {
    String _msg = "";
    @override
    Widget build(BuildContext context) {
        return NotificationListener<MyNotification>(
            onNotification: (notification) {
                setState(() => { _msg += notification.msg + " "; })
                return true;
            },
            child: RaisedButton( 
                onPressed: () => MyNotification('hi'),dispatch(context),
                child: Text('Send Notification'),
            ),
        );
    }
}