我们都知道flutter都是通过setState重新渲染build，实现数据和UI的更新；然而一个界面有时候需要更新的内容较少，而重新build，会大大的影响性能问题。因此，flutter有一个增量渲染的机制，去对数据发生变的进行增量更新。
接下来我们就来讲述一下flutter增量更新常用到的key和GlobalKey的使用。

之前我们讲述过flutter的渲染流程，他有三颗重要的树，widget树，element树，Render树。
而flutter更新数据时，会拿widget现有数据与element之前保存的数据进行比较，通过发现数据是否发生变化，来更新数据。
下面我们通过案例来实现一下这个过程。

我们先用StateleffWidget来做一个实验。

下面的代码是创建一个随机颜色的正方形块。

class Itemless extends StatelessWidget{
final title;
Itemless({this.title});
final _color = Color.fromRGBO(
Random().nextInt(256), Random().nextInt(256), Random().nextInt(256), 1.0);

@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
width: 100,
height: 100,
color: _color,
child: Center(
child: Text(title),
),
);
}
}
我们通过在界面上点击按钮，来减少正方形块，看看颜色的变化。

class keyDemo extends StatefulWidget{

@override
_keyDemoState createState() => _keyDemoState();
}
class _keyDemoState extends State{

List items = [
Itemless(title:‘aaaaa‘),
Itemless(title:‘bbbbb‘),
Itemless(title:‘ccccc‘),

//StateItem(‘aaaaa‘,key: ValueKey(1111),),
//StateItem(‘bbbbb‘,key:ValueKey(2222),),
//StateItem(‘ccccc‘,key:ValueKey(3333),),

];
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text(‘keyDemo‘),
),
body: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: items,
),
floatingActionButton: FloatingActionButton(
onPressed: (){
setState(() {
items.removeAt(0);
});
},
child: Icon(Icons.add),
),
);
}
}

上面的代码主要是通过点击floatbtn来减少数组中第0个数据，通过运行程序，一切正常，每次递减都是从第0个开始，每个方块的颜色和内容不会发生改变。

下面我们用StatefulWidget来实现一下上面的功能。

关键代码

class StateItem extends StatefulWidget{
final title;
StateItem(this.title);
//StateItem(this.title,{Key key}):super(key: key);

_StateItemState createState() => _StateItemState();

}
class _StateItemState extends State{
final _color = Color.fromRGBO(Random().nextInt(256), Random().nextInt(256), Random().nextInt(256), 1.0);
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
width: 100,
height: 100,
color: _color,
child: Center(
child: Text(widget.title),
),
);

}
}

作者：大橘猪猪侠
链接：https://www.jianshu.com/p/8b7b14f69636
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Flutter中的key和GlobalKey