Flutter性能优化-关于函数返回widget的方式是否真的不可用

不久前，我看到一篇关于性能优化的文章，提到应该使用类Widget 替代函数返回的 Widget，理由是 "框架不知道函数，但是可以看到类"。这个说法让我感到困惑。后来，我的同事在性能优化的分享中也提到了这个问题，同事指出系统源码中使用的大多是类Widget，这更加加深了我的困惑，因为源码中也存在函数 Widget，而一些复杂的组件，例如 Scaffold、Container、ButtonStyleButton、TabBarView 中的 build 函数中，有大量的判断逻辑，这里面有许多用局部变量来简化嵌套代码，我理解的这些代码与函数 Widget 并没有什么本质区别。我和同事讨论了这个问题，但没有得出一个令人满意的解释。之后，我查阅了一些相关的讨论和视频（链接在下面），但仍未得出结论。只能自己动手实践来探究这个问题。

• https://stackoverflow.com/questions/53234825/what-is-the-difference-between-functions-and-classes-to-create-widgets/53234826#53234826

• https://github.com/flutter/flutter/issues/19269

• https://www.youtube.com/watch?v=IOyq-eTRhvo

源码才是解释一切最有效的手段

通过framework类可以知道Widget 与 Element 具体调用的流程，看一下里面performRebuild方法(简化了无关讨论内容的代码)：

void performRebuild() {
  Widgetbuilt = build();
  _child = updateChild(_child, built, slot);
}

这种方法能够揭示 widget 和 Element 的更新过程。在此过程中，系统首先调用 build() 方法，将所有 widget 打包成一个 widget。然后，系统遍历该新 widget，以更新现有的 Element 树和 Widget 树。更新过程的代码如下：

ElementupdateChild(Elementchild, WidgetnewWidget, ObjectnewSlot) {
    final Element newChild;
    if (child != null) { 
         // 判断新旧 widget是否是同属于StatefulWidget或StatelessWidget，一般只有热重载时才有可能变成 false
        bool hasSameSuperclass = true;
        if (hasSameSuperclass && child.widget == newWidget) {
            newChild = child;
        } else if (hasSameSuperclass && Widget.canUpdate(child.widget, newWidget)) {
            child.update(newWidget);
            newChild = child;
        } else {
            deactivateChild(child);
            newChild = inflateWidget(newWidget, newSlot);
        }
    } else {
      newChild = inflateWidget(newWidget, newSlot);
    }
    return newChild;
}

/// 非继承于RenderObjectElement的Element更新Element 上的_widget 参数并继续子组件查找更新
/// 继承于RenderObjectElement的Element除了更新了_widget还更新了 RenderObject
void update(covariant Widget newWidget) {
    _widget = newWidget;
}

Element inflateWidget(Widget newWidget, ObjectnewSlot) {
    final Keykey = newWidget.key;
    if (key is GlobalKey) {
         // 如果 key 是GlobalKey，需要将这个key 所对应的Element 移动到现在位置后再去重新刷新
        final ElementnewChild = _retakeInactiveElement(key, newWidget);
        newChild._activateWithParent(this, newSlot);
        final ElementupdatedChild = updateChild(newChild, newWidget, newSlot);
        return updatedChild!;
    }
    final Element newChild = newWidget.createElement();
    newChild.mount(this, newSlot);
    return newChild;
}

static bool canUpdate(Widget oldWidget, Widget newWidget) {
    return oldWidget.runtimeType == newWidget.runtimeType
        && oldWidget.key == newWidget.key;
}

更新过程的代码表明，除了 child 和 newWidget 为空以及 key 变化外，Element 的更新仅取决于新旧 Widget 的层级和类型。只有 Widget 的层级或类型发生变化，才会导致 Element 重新创建。因此，无论使用类Widget 还是返回 Widget 的函数，在更新之前都会被组合成一个 Widget，并且不会导致 Widget 的层级或类型发生变化。在 RenderObject 树中，只有继承了 RenderObjectWidget 的组件的 Element 才会调用 mount 方法以创建新的 RenderObject。只要 Element 保持不变，RenderObject 的结构也将保持不变。因此，从这个角度来看，类Widget 和函数 Widget 没有本质区别。

在 Dart 层面，类Widget 和函数 Widget 之间存在一些差别。例如，类Widget 支持 const，而函数 Widget 则不支持。在一些开源的 Flutter 小项目中，大多数采用类Widget，其中的数据通常写在本地且不变。因此，它们通常使用 const，以优化项目性能。然而，在实际项目中，数据通常来自后端，这些数据是动态变化的。即使将组件封装为类Widget，其调用方的参数也会变化，因此不能使用 const 进行修饰。

综上所述，函数 Widget 并不是不能使用的，可以在项目中适当的位置使用函数 Widget，我总结出的使用规则如下：

• 可能出现复用的Widget使用statelessWidget或者statefulWidget进行封装，这个是遵循Flutter的通用规则。
• statelessWidget页面里面，不需要变化的部分可以使用函数进行模块的拆分，需要变化的部分可以使用statefulWidget进行封装。
• statefulWidget页面里面，不需要变化且不需要外部变量的部分，需要使用statelessWidget封装且用const修饰，不需要单独变化且需要外部变量的部分可以使用函数进行模块的拆分，需要单独变化的部分使用statefulWidget封装。