《你还在滥用StatefulWidget吗》的实践

"我的"TabBar的实现中，Tab是父widget，TabItem是子widget，在原来的实现中，Tab是StatefulWidget，TabItem是StatelessWidget。

然后看到了一篇文章：
[链接] https://lizhaoxuan.github.io/2019/01/02/Flutter-你还在滥用StatefulWidget吗

文章给了我一个优化的方向，StatefulWidget尽量出现在widget tree的叶子节点，这样能使state变化带来的影响降到最小，因为StatefulWiget状态改变会导致子widget都重建，滥用的话不仅会导致对象冗余创建，也有可能会导致卡顿。

反观Tabar原来的实现，可以用下图表示，Root是StatefulWidget，Leaf是StatelessWidget，这样导致的问题是，每次选中一个tab，改变的都是Root中的state，然后导致整个widget tree都要重建，但实际上选中tab只有两个tab会发生变化，其他tab的重建是多余的，不过这里的tree很小，卡顿什么的一般不存在。

image

基于上面的观点，我把原来的结构反过来，Root变成StatelessWidget，Leaf为StatelessWidget，但是这样有存在另一个问题，在上一份日报有写过，就是tab之间的状态是互斥的，需要父widget来保持互斥，所以在Leaf管理state不太可能，我的做法是把state交给Root去控制：

//Leaf
class MineTabItemState extends State<StatefulWidget> {
...
 bool _selected = false;
 //控制状态
 void setSelected(bool selected) => setState(() {
       _selected = selected;
    });
...
}
​
//Root
class MineTab extends StatelessWidget {
...
 void setSelected(MineTabItem tab) {
  ...
   //父widget控制state
   if (selected != -1) tabs[selected].state.setSelected(false);
   tabs[index].state.setSelected(true);
  ...
}
...
}

修改前每次点击tab，全部重建：

image.png

修改后只重建两个：

image.png

TabBar的widget tree都很小，优不优化区别也不明显，为了实践我强行优化了一下。