Flutter InheritedWidget与setState及局部刷新

╰半橙微兮° 2023-06-24 04:56 13阅读 0赞

[数据共享（InheritedWidget）][InheritedWidget]学习笔记：

1.  `InheritedWidget`可以跨组件（同一个`InheritedWidget`祖先）获取数据，同时`InheritedWidget`重新`build`时，会触发所有使用`inheritFromWidgetOfExactType`获取数据的`Widget`进行`build`，原理是在该函数中将这些`Widget`添加到依赖列表中，`build`时触发其`didChangeDependencies`函数，该函数会调用`markNeedsBuild`触发`build`
2.  `ancestorInheritedElementForWidgetOfExactType`如果使用该函数获取数据，则不会将`context`添加到依赖列表，不会触发`didChangeDependencies`

## setState相关 ##

`setState()`会调用`markNeedsBuild`触发`context`即本`Element`重绘——`rebuild`，而`rebuild`会调用`performRebuild`，这个函数不同类型的Widget有不同的实现,如`StatefulWidget`对应的`ComponentElement`，`Center`对应的`SingleChildRenderObjectElement`，`Row`对应的`MultiChildRenderObjectElement`

*  大原则：尽量减少重新生成`Element`，因为这是个复杂对象，基类`Element`的`updateChild`实现如下：

/// flutter的注释特别多，基本就是一份官方教程，这里解释了Widget的更新操作
    /// The following table summarizes the above:
    ///
    /// | | **newWidget == null** | **newWidget != null** |
    /// | :-----------------: | :--------------------- | :---------------------- |
    /// | **child == null** | Returns null. | Returns new [Element]. |
    /// | **child != null** | Old child is removed, returns null. | Old child updated if possible, returns child or new [Element]. |
      @protected
      Element updateChild(Element child, Widget newWidget, dynamic newSlot) { 
        ...
        if (newWidget == null) { 
          if (child != null)
          2
            deactivateChild(child);
          return null;
        }
        if (child != null) { 
          if (child.widget == newWidget) { 
            if (child.slot != newSlot)
              updateSlotForChild(child, newSlot);
            return child;
          }
          if (Widget.canUpdate(child.widget, newWidget)) { 
            if (child.slot != newSlot)
              updateSlotForChild(child, newSlot);
            child.update(newWidget);
            ...
            return child;
          }
          deactivateChild(child);
        }
        return inflateWidget(newWidget, newSlot);
      }

不是一刀切的直接调用inflateWidget新建Element，而是分情况处理，尽量减少新建操作

1.  `oldWidget==null`且`newWidget==null`，无操作；
2.  `oldWidget!=null`且`newWidget==null`，删除节点；
3.  `oldWidget==null`且`newWidget!=null`，新增节点；
4.  `oldWidget!=null`且`newWidget!=null`，前3种都是常规操作，这种才是大多数会遇到的情况，这里又分类进行处理
    
     *  返回`Widget`一致，一般情况下我们写的代码`Widget`都是new出来的，如`Center()`，这种不符合，必须是完全一个对象才可以，这种直接返回就可以；
     *  符合`Widget.canUpdate`，大多数的情况是这种，`canUpdate`有两个条件，类型与key，一般用`Widget`时不会使用key，只要类型一致即可满足条件，此时，执行其`update`函数，这个函数也是因类型而异，如`StatelessElement`只是将自己标记为需要重绘，同时调用`rebuild`，也就是说`StatelessElement`只是将`rebuild`的指令传递了下去，给了孩子节点。
     *  实在没办法了，只能重建了

举一个简单例子：

import 'package:flutter/material.dart';
    
    class TestWidget extends StatefulWidget { 
      @override
      _TestWidgetState createState() => _TestWidgetState();
    }
    
    class _TestWidgetState extends State<TestWidget> { 
      int count= 0;
      @override
      Widget build(BuildContext context) { 
        return Column(
          children: <Widget>[
            Text('$count'),
            RaisedButton(
              onPressed: (){ 
                setState(() { 
                  count+=1;
                });
              },
              child: Text('Add'),
            )
          ],
        );
      }
    }

说一下点击按钮后，`Text('$count')`的重绘路径

下一帧

子节点开始重绘

触发Column子Widget重绘

触发Text重绘

Text其实是个StatelessWidget

到这里只更新数据而不会重新创建Element

setState

Element.markNeedsBuild

TestWidget-ComponentElement.rebuild

ComponentElement.performRebuild

Column--MultiChildRenderObjectElement.update

RenderObjectElement.updateChildren

Element.updateChild

StatelessElement.update

RichText-RenderObjectElement.update

RichText-updateRenderObject

也就是说，`setState`后，整个`Widget`触发重绘，Flutter框架会将轻量的`Widget`重建，而尽量减少`Element`的重建，保证性能。但总的来说，如果是大`Widget`如很长的列表之类，重绘还是很耗性能的操作。如果想要局部刷新，最好还是用`StatefulBuilder`或`Provider`之类的插件来实现。

[InheritedWidget]: https://book.flutterchina.club/chapter7/inherited_widget.html