Flutter局部刷新原理

• 概述

  在Flutter中，我们知道，刷新界面要调用setState方法，在一个界面中，通常只需要刷新某个组件或者某一部分组件，这种情况下调用父级State的setState方法会造成不必要的资源浪费。 在这种需求下，我们需要找到一个方式可以进行局部刷新。

• 做法和原理

  其实局部刷新很简单，我们只需要把需要刷新的组件聚到一个StatefulWidget中，通过一个State来管理，然后刷新的时候调用这个State的setState方法即可完成针对这部分组件的刷新，父级和兄弟级的StatefulWidget都不会被引起rebuild。

  原理也很好理解，就是调用setState的流程，调用setState方法:

  @protected
  void setState(VoidCallback fn) {
    ...
    _element!.markNeedsBuild();
  }
  

  Element的markNeedsBuild方法会调用BuildOwner的scheduleBuildFor方法：

  void markNeedsBuild() {
    ...
    if (dirty)
      return;
    _dirty = true;
    owner!.scheduleBuildFor(this);
  }
  

  scheduleBuildFor方法会把当前element放入BuildOwner的_dirtyElements中：

  void scheduleBuildFor(Element element) {
    ...
    _dirtyElements.add(element);
    element._inDirtyList = true;
    ...
  }
  

  当下一个Frame到来时框架会调用WidgetsBinding的drawFrame方法：

  @override
  void drawFrame() {
    ...
    try {
      if (renderViewElement != null)
        buildOwner!.buildScope(renderViewElement!);
      //这里面是布局、合成层信息、绘制等流程
      super.drawFrame();
      buildOwner!.finalizeTree();
    } finally {
        ...
    }
    ...
  }
  

  这里会调用BuildOwner的buildScope方法：

  @pragma('vm:notify-debugger-on-exception')
  void buildScope(Element context, [ VoidCallback? callback ]) {
    ...
    try {
      ...
      _dirtyElements.sort(Element._sort);
        ...
      int dirtyCount = _dirtyElements.length;
      int index = 0;
      while (index < dirtyCount) {
        ...
        try {
          //重新构建
          _dirtyElements[index].rebuild();
        } catch (e, stack) {
          ...
        }
        index += 1;
        ...
      }
        ...
    } finally {
      for (final Element element in _dirtyElements) {
        assert(element._inDirtyList);
        element._inDirtyList = false;
      }
      //清空_dirtyElements
      _dirtyElements.clear();
      ...
    }
    ...
  }
  

  在buildScope方法中会循环 _dirtyElements，依次调用里面的element的rebuild方法进行构建，rebuild方法中又会调用performRebuild方法：

  @pragma('vm:prefer-inline')
  void rebuild() {
    ...
    performRebuild();
    ...
  }
  

  performRebuild方法是在StatefulElement和StatelessElement的共同父类ComponentElement中实现的，在这个方法中会调用build方法创建Widget：

  //StatefulElement中实现的build方法，可见会通过state的build方法生成
  @override
  Widget build() => state.build(this);
  //StatelessElement中实现的build方法
  @override
  Widget build() => widget.build(this);
  

  所以局部刷新原理的核心就是把需要刷新的区域收到一个State中，然后调用这个State的setState方法就会使当前的这个State的element变为dirty，把它放入需要重新构建的element集合中，在帧回调后会循环这个集合调用它的rebuild方法进行重新构建，因为我们更上一级的State并没有执行它的setState方法所以不会添加在需要重新构建的element集合中。

• 关于get框架的应用

  get框架的局部刷新也是通过上面的原理完成的，下面我们来看看他是怎么封装的。

  首先它使用一个叫做GetxController的东西来提供统一刷新的api接口：

  abstract class GetxController extends DisposableInterface
      with ListenableMixin, ListNotifierMixin {
    void update([List