Widget函数与类的性能差异：两种实现的组件重建与性能对比

背景代码 #

Dummy Widget实现 #

class Dummy extends StatelessWidget {
  const Dummy();

  @override
  Widget build(BuildContext context) {
    return const Text("text");
  }
}

方案1：直接在build中使用const Widget #

class Option1 extends StatelessWidget {
  const Option1();

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      child: const Dummy(),
    );
  }
}

方案2：通过方法返回const Widget #

class Option2 extends StatelessWidget {
  const Option2();

  Widget createDummyWidget() {
    return const Dummy();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      child: createDummyWidget(),
    );
  }
}

一、Widget重建机制差异 #

方案1的重建逻辑 #

在Option1的build方法中，直接传入const Dummy()作为SizedBox的子Widget。由于Dummy使用了const构造器，这个实例是编译期常量，无论Option1重建多少次，传递给SizedBox的都是同一个Dummy实例。

Flutter的Widget diff算法会对比前后两次build生成的Widget树：当发现子Widget的引用完全相同时，会跳过该节点的重建流程——不会触发Dummy的build方法，也不会更新对应的Element和RenderObject。

方案2的重建逻辑 #

当前代码中，createDummyWidget方法返回的是const Dummy()，由于Dart中相同的const表达式会复用实例，所以每次调用createDummyWidget返回的都是同一个Dummy实例。因此，Option2重建时，SizedBox的子Widget引用与之前完全一致，和方案1的重建逻辑完全相同，不会触发Dummy的额外重建。

但如果修改createDummyWidget，去掉const关键字（即返回Dummy()），情况会完全不同：每次调用方法都会生成一个全新的Dummy实例。此时Flutter的diff算法会认为子Widget发生了变化，会重新创建Dummy对应的Element和RenderObject，并且触发Dummy的build方法。

二、性能表现差异 #

当前代码（均使用const） #

两种方案的性能表现完全一致：

• 由于Dummy实例复用，每次Option1/Option2重建时，Dummy节点不会产生任何额外的计算开销。
• 仅Option1/Option2自身的build方法执行一次，性能开销可以忽略。

若方案2去掉const（返回非const Dummy） #

此时方案2的性能会明显劣于方案1：

• 每次Option2重建时，都会创建新的Dummy实例，触发完整的Widget→Element→RenderObject重建流程，增加了不必要的计算和内存开销。
• 如果Dummy是复杂Widget（而非示例中的简单Text），这种性能差异会被放大，可能导致界面卡顿。

额外说明 #

虽然当前代码中两种方案性能无差异，但方案1的写法更直接清晰，而方案2的方法封装仅在需要复用Widget创建逻辑（比如多个地方需要创建相同配置的Dummy）时才有意义。如果只是单一场景使用，方案1的可读性和简洁性更优。

内容的提问来源于stack exchange，提问作者user19728436