widget介绍
flutter开发最常用到的对象就是widget，它不仅包含了各种UI组件，还囊括了手势操作组件(GestureDetector)和动画组件(AnimatedWidget)等各种功能的widget。因此官方说“everything is widget”，widget是配置信息，我们用它来方便快捷的实现各种UI效果，例如，我们做一个最简单的页面。
void main() {
runApp(Container(
color: Colors.white,
child: Center(
child: Text("hello Flutter",
textDirection: TextDirection.ltr,
textAlign: TextAlign.center,
style: TextStyle(color: Colors.red,fontSize: 22),),
),
));
}
这里我们只声明了一个container的根widget和一个text的字widget，页面就显示出来了，看起来非常简单，那么它是怎么绘制到屏幕上的呢？
三棵树
实际上，flutter的UI绘制包含了三个元素，widget，element和renderObject。这三个元素分别组成了三棵树：Widget 树，Element 树和 RenderObject 树，如下图：
系统启动时，runApp方法会被调用，flutter会从最外层的widget去遍历创建一颗widget树；每一个widget创建后会调用createElement()创建相应的element，形成一颗element树；element创建后会通过createRenderObject()创建相应的renderObject树，如此就形成了三棵树。
三棵树的作用
那么，这三棵树都是用来干嘛的呢？
- widget：配置信息，用来描述UI特征，比如尺寸多大，颜色是什么，位置在哪里
- element：element是widget的实际实例，它同时持有了widget和renderObject的引用，用来决定是否进行UI更新。
- renderObject：UI更新的执行者，保存了元素的大小，布局等信息。它才是真正调用渲染引擎去进行更新的对象
那么，flutter为什么要设计成这样呢？为什么要弄成复杂的三层结构？
答案是性能优化。如果每一点细微的操作就去完全重绘一遍UI，将带来极大的性能开销。flutter的三棵树型模式设计可以有效地带来性能提升。widget的重建开销非常小，所以可以随意的重建，因为它不一会导致页面重绘，并且它也不一定会常常变化。而renderObject如果频繁创建和销毁成本就很高了，对性能的影响比较大，因此它会缓存所有页面元素，只是当这些元素有变化时才去重绘页面。而判断页面有无变化就依靠element了，每次widget变化时element会比较前后两个widget，只有当某一个位置的Widget和新Widget不一致，才会重新创建Element和widget；其他时候则只会修改renderObject的配置而不会进行耗费性能的RenderObject的实例化工作了。
Element的updateChild方法：
assert(() {
final int oldElementClass = Element._debugConcreteSubtype(child);
final int newWidgetClass = Widget._debugConcreteSubtype(newWidget);
hasSameSuperclass = oldElementClass == newWidgetClass;
return true;
}());
if (hasSameSuperclass && child.widget == newWidget) {
if (child.slot != newSlot)
updateSlotForChild(child, newSlot);
newChild = child;
} else if (hasSameSuperclass && Widget.canUpdate(child.widget, newWidget)) {
if (child.slot != newSlot)
updateSlotForChild(child, newSlot);
child.update(newWidget);
assert(child.widget == newWidget);
assert(() {
child.owner!._debugElementWasRebuilt(child);
return true;
}());
newChild = child;
} else {
deactivateChild(child);
assert(child._parent == null);
newChild = inflateWidget(newWidget, newSlot);
}
} else {
newChild = inflateWidget(newWidget, newSlot);
}
assert(() {
if (child != null)
_debugRemoveGlobalKeyReservation(child);
final Key? key = newWidget.key;
if (key is GlobalKey) {
assert(owner != null);
owner!._debugReserveGlobalKeyFor(this, newChild, key);
}
return true;
}());
return newChild;
}
可以看出，当widget指针相同或者类型相同时，只会进行微更新，即只更新内容，renderObject并不会重建。而当widget类型不同或key不同时，element才会将旧的widget从widget树中移除并attach上新的widget。
element的更新策略：
static bool canUpdate(Widget oldWidget, Widget newWidget) {
return oldWidget.runtimeType == newWidget.runtimeType
&& oldWidget.key == newWidget.key;
}
接下来看两个例子：
当widget不变时
class ChangeWidget extends StatefulWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
throw UnimplementedError();
}
@override
State<StatefulWidget> createState() {
return ChangeWidgetState();
}
}
class ChangeWidgetState extends State{
bool isChangeText =false;
@override
Widget build(BuildContext context) {
print("build");
return Scaffold(
appBar: AppBar(
title: Text("计数器"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
isChangeText?buildText1():buildText2(),
],
),
),
floatingActionButton: FloatingActionButton(onPressed: () {
increaseCount();
},tooltip: "切换textWidget",
child: Icon(Icons.add),
),
);
}
void increaseCount(){
setState(() {
isChangeText = ! isChangeText;
});
}
Widget buildText1(){
return Text("flutter1",style: Theme.of(context).textTheme.headline4);
}
Widget buildText2(){
return Text("flutter2",style: Theme.of(context).textTheme.headline3);
}
}
如上代码，一个statefulWidget，有两个方法分别返回了不同文字的TextWidget，由一个按钮控制来显示哪一个。运行后切换按钮会发现文字会来回变动。然而打开Dart DevTools观察，会发现Text下面的RichText的RenderObject的ID一直是#63684，没有变化，不管怎么切换这个UI都不会发生变化。
说明虽然这两个text的文字变化了，但是widget类型并没有变化，所以并不会重建renderObject。只会将变化了的元素在页面上进行了渲染。
当widget改变时
而如果我们将其中的一个组件更改成不同类型的，renderObject的类型还会发生变化吗？
让buildText2返回一个不同的widget试试。
Widget buildText2() {
// return Text("flutter2", style: Theme.of(context).textTheme.headline3);
return SizedBox(height: 30,width: 30);
}
刷新一下发现这两个widget的renderObject的ID是不同的。由此我们可以验证当widget类型不同时，element和renderObject都会发生变化，旧的销毁，新的重建。
这就是flutter高性能的秘诀之一。
