Flutter入门07 -- 渲染原理与Key的使用

作者: zyc_在路上 | 来源:发表于2022-01-21 16:45 被阅读0次

Flutter入门07 -- 渲染原理与Key的使用
Flutter入门12 -- 渲染原理与Key的使用
Flutter VS React Native
复杂业务如何保证Flutter的高性能高流畅度
Flutter - Key的原理
Flutter 渲染原理
浏览器核心原理
flutter 渲染三棵树(Widget、Element、Ren
flutter工作原理
Flutter之key的原理和使用

Flutter的渲染流程

Widget

在Flutter中万物皆为Widget，构成一棵Widget树，Widget可以理解为 UI界面的状态描述文件，这些描述文件在我们进行状态改变时会不断的重新build，也就是说Widget树的状态是十分不稳定的，当其状态发生变化时，就需要重新Build，那么Flutter渲染引擎渲染Widget树是非常损耗性能的；

Element

Element是Widget的实例，是构成Element树的元素，Element相当于虚拟的DOM，Widge描述和配置子树的样子，而Element实际去配置在Element树中特定的位置。Element最大的意义在于以最小的开销来更新RenderObject；

RenderObject

是渲染树上的对象，是渲染库的核心；
主要负责布局与绘制，同时也是构成渲染树的元素；

下面给一张图，详细描述了Widget，Element与RenderObject之间的关系：

image.png

第一点：`Padding`，`Row`，`Text`，`TextField`的继承链路

从图中看出Padding，Row，Text，TextField四种组件的继承关系，最终都是继承自Widget，所以说在Flutter中万物皆为Widget；
Padding -> singleChildRenderObjectWidget -> RenderObjectWidget -> Widget
Row -> Flex -> singleChildRenderObjectWidget -> RenderObjectWidget -> Widget
Text -> statelessWidget -> Widget
TextField -> statefulWidget -> Widget
Padding与Row属于一类，都是继承自RenderObjectWidget属于渲染对象组件
Text与TextField属于一类，没有继承自RenderObjectWidget
在Widget类中有Element createElement()抽象方法，其作用是为当前Widget创建一个Element对象，所有继承自Widget类的组件，都可实现这个方法，为自己创建一个Element对象，也就是说一个Widget对象必定会有一个对应的Element对象；
针对Padding组件，是在其父类SingleChildRenderObjectWidget中调用createElement()方法，返回一个singleChildRenderObjectElement对象；

第二点：`Padding`，`Row`，`Text`，`TextField`调用`createElement()`返回`Element`对象

针对Padding组件，是在其父类SingleChildRenderObjectWidget中调用createElement()方法，返回一个singleChildRenderObjectElement对象；
针对Row组件，是在其父类multiChildRenderObjectWidget中调用createElement()方法，返回一个mutilChildRenderObjectElement对象；
针对Text组件，是在其父类statelessWidget中调用createElement()方法，返回一个statelessElement对象；
针对TextField组件，是在其父类statefulWidget中调用createElement()方法，返回一个statefulElement对象；
这四种组件调用createElement()方法，创建的Element对象类型均不同，最终都是继承自Element，其继承关系如下：
Padding：singleChildRenderObjectElement -> RenderObjectElement -> Element
Row：mutilChildRenderObjectElement -> RenderObjectElement -> Element
Text：statelessElement -> ComponmentElement -> Element
TextField：statefulElement -> ComponmentElement -> Element

第三点：Element调用mount方法

当Widget的Element创建完成时，系统会自动调用Element的mount方法；
针对Padding，创建的singleChildRenderObjectElement，调用其mount方法，实现如下：

@override
  void mount(Element parent, dynamic newSlot) {
    super.mount(parent, newSlot);
    _child = updateChild(_child, widget.child, null);
  }

内部调用其父类RenderObjectElement的mount方法，实现如下：

 @override
  void mount(Element parent, dynamic newSlot) {
    super.mount(parent, newSlot);
    assert(() {
      _debugDoingBuild = true;
      return true;
    }());
    _renderObject = widget.createRenderObject(this);
    assert(() {
      _debugDoingBuild = false;
      return true;
    }());
    assert(() {
      _debugUpdateRenderObjectOwner();
      return true;
    }());
    assert(_slot == newSlot);
    attachRenderObject(newSlot);
    _dirty = false;
  }

其中_renderObject = widget.createRenderObject(this)即根据Element对象来创建渲染对象，看到这里就明确了Widget -> Element -> RenderObject之间关系了；
针对Row与Padding类似，最终也是调用父类RenderObjectElement的mount方法，创建对应的渲染对象；
针对Text与TextField，创建的Element对象statelessElement与statefulElement对象，最终都是在其父类ComponmentElement中调用mount方法，实现如下：

@override
  void mount(Element parent, dynamic newSlot) {
    super.mount(parent, newSlot);
    assert(_child == null);
    assert(_active);
    _firstBuild();
    assert(_child != null);
  }

内部调用_firstBuild()方法，实现如下：

void _firstBuild() {
    rebuild();
  }

内部调用rebuild()方法，实现如下：

void rebuild() {
    assert(_debugLifecycleState != _ElementLifecycle.initial);
    if (!_active || !_dirty)
      return;
    assert(() {
      if (debugOnRebuildDirtyWidget != null) {
        debugOnRebuildDirtyWidget(this, _debugBuiltOnce);
      }
      if (debugPrintRebuildDirtyWidgets) {
        if (!_debugBuiltOnce) {
          debugPrint('Building $this');
          _debugBuiltOnce = true;
        } else {
          debugPrint('Rebuilding $this');
        }
      }
      return true;
    }());
    assert(_debugLifecycleState == _ElementLifecycle.active);
    assert(owner._debugStateLocked);
    Element debugPreviousBuildTarget;
    assert(() {
      debugPreviousBuildTarget = owner._debugCurrentBuildTarget;
      owner._debugCurrentBuildTarget = this;
      return true;
    }());
    performRebuild();
    assert(() {
      assert(owner._debugCurrentBuildTarget == this);
      owner._debugCurrentBuildTarget = debugPreviousBuildTarget;
      return true;
    }());
    assert(!_dirty);
  }

内部的核心方法调用为performRebuild()，此方法是一个抽象方法，选中Command+Alt+B查看实现类有ComponmentElement，实现如下：

@override
  void performRebuild() {
    if (!kReleaseMode && debugProfileBuildsEnabled)
      Timeline.startSync('${widget.runtimeType}',  arguments: timelineArgumentsIndicatingLandmarkEvent);

    assert(_debugSetAllowIgnoredCallsToMarkNeedsBuild(true));
    Widget built;
    try {
      assert(() {
        _debugDoingBuild = true;
        return true;
      }());
      built = build();
      assert(() {
        _debugDoingBuild = false;
        return true;
      }());
      debugWidgetBuilderValue(widget, built);
    } catch (e, stack) {
      _debugDoingBuild = false;
      built = ErrorWidget.builder(
        _debugReportException(
          ErrorDescription('building $this'),
          e,
          stack,
          informationCollector: () sync* {
            yield DiagnosticsDebugCreator(DebugCreator(this));
          },
        ),
      );
    } finally {
      // We delay marking the element as clean until after calling build() so
      // that attempts to markNeedsBuild() during build() will be ignored.
      _dirty = false;
      assert(_debugSetAllowIgnoredCallsToMarkNeedsBuild(false));
    }
    try {
      _child = updateChild(_child, built, slot);
      assert(_child != null);
    } catch (e, stack) {
      built = ErrorWidget.builder(
        _debugReportException(
          ErrorDescription('building $this'),
          e,
          stack,
          informationCollector: () sync* {
            yield DiagnosticsDebugCreator(DebugCreator(this));
          },
        ),
      );
      _child = updateChild(null, built, slot);
    }

    if (!kReleaseMode && debugProfileBuildsEnabled)
      Timeline.finishSync();
  }

各种断言与逻辑判断，其核心调用为built = build()，build()是ComponmentElement类的一个抽象方法，其子类有statelessElement和statefulElement，其实现分别如下：

@override
  Widget build() => widget.build(this);

@override
  Widget build() => _state.build(this);

可以看出无状态的statelessWidget的build方法的调用流程：Widget创建完Element -> 调用Element的mount方法 -> _firstBuild() - rebuild() -> performRebuild() -> build() -> widget.build(this)
有状态的statefulWidget的build方法的调用流程：Widget创建完Element -> 调用Element的mount方法 -> _firstBuild() - rebuild() -> performRebuild() -> build() -> _state.build(this)
这也就解释了有状态的statefulWidget的build方法是在State中的；
widget.build(this)与_state.build(this)中的参数this，就是Element，也就是说Widget build(BuildContext context)，中的BuildContext本质就是Element

第四点：statefulWidget的底层探索

statefulWidget创建的Element为StatefulElement，其构造方法如下：

StatefulElement(StatefulWidget widget)
      : _state = widget.createState(),
        super(widget) {
    assert(() {
      if (!_state._debugTypesAreRight(widget)) {
        throw FlutterError.fromParts(<DiagnosticsNode>[
          ErrorSummary('StatefulWidget.createState must return a subtype of State<${widget.runtimeType}>'),
          ErrorDescription(
            'The createState function for ${widget.runtimeType} returned a state '
            'of type ${_state.runtimeType}, which is not a subtype of '
            'State<${widget.runtimeType}>, violating the contract for createState.'
          ),
        ]);
      }
      return true;
    }());
    assert(_state._element == null);
    _state._element = this;
    assert(
      _state._widget == null,
      'The createState function for $widget returned an old or invalid state '
      'instance: ${_state._widget}, which is not null, violating the contract '
      'for createState.',
    );
    _state._widget = widget;
    assert(_state._debugLifecycleState == _StateLifecycle.created);
  }

可以看到statefulWidget的State是在statefulElement的构造函数中创建的；
_state._widget = widget，将Widget绑定给State，这也就解释了在State中可以访问到Widget对象；

第五点：Element的源码探索

Element类的构造方法如下：

Element(Widget widget)
    : assert(widget != null),
      _widget = widget;

可以看出Element引用了widget；
RenderObjectElement继承自Element，其内部有访问renderObject渲染对象的setter与getter方法，如下所示：

@override
  RenderObject get renderObject => _renderObject;
  RenderObject _renderObject;

可以看出Element引用了renderObject；
如果是statefulElement，还可以引用State；

总结：

Widget树是配置信息，状态不断变化中，不稳定；
- 内部调用createElement方法，创建与之对应的Element；
Element树是Widget的实例，真正保存Widget结构数据的对象；
- Element创建完成之后，由系统的framework调用mount方法，继承自RenderObjectWidget会调用createRenderObject方法，创建渲染对象，继承自statelessWidget与statefulWidget不会调用createRenderObject方法，最终会调用widget的build方法与state的build方法；
- Element对widget与RenderObject以及state都有引用；
RenderObject渲染树是真正的渲染对象；
- 内部包含渲染对象的布局与绘制操作；

Widget的属性 Key的应用

Widget的构造方法会传入一个可选参数Key，如下：

const Widget({ this.key });

此可选参数Key的作用是什么，现在我们通过案例来探讨一下：

案例代码一 -- StatelessWidget

import 'dart:math';
import 'package:flutter/material.dart';

void main() => runApp(SFMyApp());

class SFMyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: SFHomePage());
  }
}

class SFHomePage extends StatefulWidget {
  @override
  _SFHomePageState createState() => _SFHomePageState();
}

class _SFHomePageState extends State<SFHomePage> {
  final List<String> names = ["1111", "2222", "3333"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("基础widget")),
      body: ListView(
          children: names.map((name) {
            return ListItemLess(name);
          }).toList()),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.delete),
        onPressed: () {
          setState(() {
            names.removeAt(0);
          });
        },
      ),
    );
  }
}

class ListItemLess extends StatelessWidget {
  final String name;
  final Color randomColor = Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256));

  ListItemLess(this.name);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(name,style: TextStyle(color: Colors.white,fontSize: 25)),
      height: 80,
      color: randomColor,
    );
  }
}

效果图如下所示：

image.png

当每次点击右下角的按钮时，都会删除第一条数据；
现象：每删除一个，剩余的ListItemLess的颜色都会发生变化；
原因：删除之后会调用setState方法，会重新build，重新build出来的新的ListItemLess会重新生成一个新的随机颜色；

案例代码二 -- StatefulWidget

将上面的ListItemLess改成ListItemful继承自StatefulWidget，代码如下：

import 'dart:math';
import 'package:flutter/material.dart';

void main() => runApp(SFMyApp());

class SFMyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: SFHomePage());
  }
}

class SFHomePage extends StatefulWidget {
  @override
  _SFHomePageState createState() => _SFHomePageState();
}

class _SFHomePageState extends State<SFHomePage> {
  final List<String> names = ["1111", "2222", "3333"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("基础widget")),
      body: ListView(
          children: names.map((name) {
            return ListItemful(name);
          }).toList()),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.delete),
        onPressed: () {
          setState(() {
            names.removeAt(0);
          });
        },
      ),
    );
  }
}

class ListItemful extends StatefulWidget {
  final String name;
  ListItemful(this.name);

  @override
  _ListItemfulState createState() => _ListItemfulState();
}

class _ListItemfulState extends State<ListItemful> {
  final Color randomColor = Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256));

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(widget.name),
      height: 80,
      color: randomColor,
    );
  }
}

现象：每删除一个，都是最后一个被删除，剩余的颜色不会变化；
删除之前的Widget Tree 与 Element Tree如下所示：

Snip20211029_70.png

删除第一个青色widget，整个widget树会重建，而对应的Element树不会重建，Flutter SDK会根据新建widget树上对应位置的新widget与Element树中Element保存引用的旧widget，进行比对，决定当前Element是更新还是重建，判断方法为canUpdate

static bool canUpdate(Widget oldWidget, Widget newWidget) {
    return oldWidget.runtimeType == newWidget.runtimeType
        && oldWidget.key == newWidget.key;
  }

当新建的widget与Element引用的旧widget的runtimeType与key值都相同时，那么当前的Element只需要更新数据，不需要重建，可提升性能；
删除第一个青色widget之后，widget树与element树如下：

image.png

然后进行新旧widget的比对，将widget与Element树中Element进行遍历比较：
- fulWidget2与element青引用的widget进行比较，发现类型与key(没有设置key)是相同的，那么element青(原来引用fulWidget1)会保留并更新引用fulWidget2，
- fulWidget3与element粉引用的widget进行比较，发现类型与key(没有设置key)是相同的，那么element粉(原来引用fulWidget2)保留并更新引用fulWidget3
- element绿在widget树中没有对应的widget了，直接删除；

案例代码三 -- StatefulWidget传可选参数key

import 'dart:math';
import 'package:flutter/material.dart';

void main() => runApp(SFMyApp());

class SFMyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: SFHomePage());
  }
}

class SFHomePage extends StatefulWidget {
  @override
  _SFHomePageState createState() => _SFHomePageState();
}

class _SFHomePageState extends State<SFHomePage> {
  final List<String> names = ["1111", "2222", "3333"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("基础widget")),
      body: ListView(
          children: names.map((name) {
            return ListItemful(name,key: ValueKey(name));
          }).toList()),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.delete),
        onPressed: () {
          setState(() {
            names.removeAt(0);
          });
        },
      ),
    );
  }
}

class ListItemful extends StatefulWidget {
  final String name;

  // ListItemful(this.name);
  ListItemful(this.name,{Key key}) : super(key: key);

  @override
  _ListItemfulState createState() => _ListItemfulState();
}

class _ListItemfulState extends State<ListItemful> {
  final Color randomColor = Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256));

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(widget.name),
      height: 80,
      color: randomColor,
    );
  }
}

创建ListItemful传入可选参数ValueKey(name)，即key为数据内容，现在再删除item，正常删除，不会出现颜色变化与删除最后一条；
判断Element更新/重建的逻辑与上面的相同，只不过现在是每一个widget都绑定一个key，重新build之后widget树中的每个 单个widget与Element树中element所引用的widget进行比对，若存在相同的runtimeType,key，那么这个element就可以重用，无需销毁重建；

image.png

重建后的widget树，由于key是数据内容，所以在element树中element引用的widget的key都能匹配到，

案例代码四 -- StatefulWidget传可选参数key -- UniqueKey()

UniqueKey是独一无二的，也就是说每调用一次都会生成一个不带重复的key；
根据上面的原理，ListItemful创建若传入UniqueKey，那么重建后的widget的key肯定在element树中element引用的widget的key都不能匹配到，所以整个Element树都会重建，所以每删除一次，所有item的颜色都会发生变化；

widget可选参数Key的分类

Key是一个抽象类，其有一个工厂构造器，子类有：
- LocalKey：应用于具有相同父Element的widget进行比较，是diff算法的核心所在；
- GlobalKey：通常使用于某个widget，然后访问其widget本身与state的；
LocalKey有三个子类：
- ValueKey：我们以特定的值作Widget的key，比如字符串，数字等；
- ObjectKey：以模型对象作为Widget的key；
- UniqueKey：可确保key为唯一的；

GlobalKey

先上案例代码，如下所示：

import 'package:flutter/material.dart';

void main() => runApp(SFMyApp());

class SFMyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: SFHomePage());
  }
}

class SFHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("基础widget")),
        body: SFHomeContent(key: homeKey),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.gesture),
        onPressed: (){
          
        },
      ),
    );
  }
}

class SFHomeContent extends StatefulWidget {
  final String name = "2222";

  @override
  _SFHomeContentState createState() => _SFHomeContentState();
}

class _SFHomeContentState extends State<SFHomeContent> {
  final String message = "1111";

  @override
  Widget build(BuildContext context) {
    return Text(message);
  }

  void test(){
    print("_SFHomeContentState test");
  }
}

现在要实现，在点击按钮的时候能访问SFHomeContent的name属性，能访问_SFHomeContentState的message属性，以及调用test方法，可通过GlobalKey来实现；
GlobalKey类的定义是：abstract class GlobalKey<T extends State<StatefulWidget>> extends Key，易知GlobalKey是一个抽象类，从泛型可以看出其本质是一个State，
通过创建一个GlobalKey<_SFHomeContentState>，然后传参给SFHomeContent，修改后的代码如下：

import 'package:flutter/material.dart';

void main() => runApp(SFMyApp());

class SFMyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: SFHomePage());
  }
}

class SFHomePage extends StatelessWidget {

  final GlobalKey<_SFHomeContentState> homeKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("基础widget")),
        body: SFHomeContent(key: homeKey),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.gesture),
        onPressed: (){
          print(homeKey.currentState.message);
          print(homeKey.currentState.widget.name);
          homeKey.currentState.test();
        },
      ),
    );
  }
}

class SFHomeContent extends StatefulWidget {
  final String name = "2222";

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

  @override
  _SFHomeContentState createState() => _SFHomeContentState();
}

class _SFHomeContentState extends State<SFHomeContent> {
  final String message = "1111";

  @override
  Widget build(BuildContext context) {
    return Text(message);
  }

  void test(){
    print("_SFHomeContentState test");
  }
}

Flutter入门07 -- 渲染原理与Key的使用
Flutter的渲染流程 Widget 在Flutter中万物皆为Widget，构成一棵Widget树，Widge...
Flutter入门12 -- 渲染原理与Key的使用
Flutter的三棵树 Widget树 Widget可以看成是对组件的描述文件或者配置文件，主要是用来描述组件的属...
Flutter VS React Native
渲染 Flutter是自己一套渲染机制，没有使用原生渲染 RN最终使用的原生渲染性能 Flutter 没有与本地...
复杂业务如何保证Flutter的高性能高流畅度
Flutter渲染原理简介优化之前我们先来介绍下Flutter的渲染原理，通过这部分基础了解渲染流程以及主要耗时...
Flutter - Key的原理
前言上篇文章我们简单探索了Flutter的渲染原理---Flutter初探渲染原理初探[https://www....
Flutter 渲染原理
1、Flutter 渲染原理 Flutter框架包含Flutter Framework(Dart)、Flutter...
浏览器核心原理
canvas核心与原理 canvas 渲染引擎 skia flutter 是 dart + ski 页面是 js ...
flutter 渲染三棵树(Widget、Element、Ren
Flutter的渲染流程如果想了解flutter的渲染原理，那么flutter的三棵树是无论如何也绕不过去的。 ...
flutter工作原理
为何flutter能达到原生性能渲染方式： flutter渲染UI和ios、android基本原理一样，自己掌控...
Flutter之key的原理和使用
之前讲flutter的渲染原理时我们知道flutter有三棵树：widgetTree，elementTree，re...

Flutter入门07 -- 渲染原理与Key的使用

Flutter的渲染流程

Widget

Element

RenderObject

第一点：`Padding`，`Row`，`Text`，`TextField`的继承链路

第二点：`Padding`，`Row`，`Text`，`TextField`调用`createElement()`返回`Element`对象

第三点：Element调用mount方法

第四点：statefulWidget的底层探索

第五点：Element的源码探索

总结：

Widget的属性 Key的应用

案例代码一 -- StatelessWidget

案例代码二 -- StatefulWidget

案例代码三 -- StatefulWidget传可选参数key

案例代码四 -- StatefulWidget传可选参数key -- UniqueKey()

widget可选参数Key的分类

GlobalKey

相关文章

Flutter入门07 -- 渲染原理与Key的使用

Flutter入门12 -- 渲染原理与Key的使用

Flutter VS React Native

复杂业务如何保证Flutter的高性能高流畅度

Flutter - Key的原理

Flutter 渲染原理

浏览器核心原理

flutter 渲染三棵树(Widget、Element、Ren

flutter工作原理

Flutter之key的原理和使用

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Flutter入门07 -- 渲染原理与Key的使用

Flutter的渲染流程

Widget

Element

RenderObject

第一点：Padding，Row，Text，TextField的继承链路

第二点：Padding，Row，Text，TextField调用createElement()返回Element对象

第三点：Element调用mount方法

第四点：statefulWidget的底层探索

第五点：Element的源码探索

总结：

Widget的属性 Key的应用

案例代码一 -- StatelessWidget

案例代码二 -- StatefulWidget

案例代码三 -- StatefulWidget传可选参数key

案例代码四 -- StatefulWidget传可选参数key -- UniqueKey()

widget可选参数Key的分类

GlobalKey

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

第一点：`Padding`，`Row`，`Text`，`TextField`的继承链路

第二点：`Padding`，`Row`，`Text`，`TextField`调用`createElement()`返回`Element`对象