performance - StatelessWidget 与返回 Widgets 的函数在性能方面的对比

Question

在性能方面，使用 StatelessWidget 与 返回 Widget 的函数 有什么区别吗？

我至少清楚 flutter's repo issue 中指出的差异与性能无关。

事实上，我有一些同事声称 functional widgets 在性能方面是最差的，但是在阅读了一些关于这个主题的内容之后，我找不到任何可以归功于此的结论性文档这一断言，因此非常欢迎对此事进行任何形式的澄清!

据我所知，它们之间的唯一区别在于使用 const Widget 的情况，这似乎可以避免重建阶段。

Answer 1

首先，我想指出的是，有一个包可用于从一个函数中创建一个 StatelessWidget:functional_widget

---

好处是性能不一定是真的。这取决于您如何使用您的小部件，主要是您如何使用它们来管理您的状态。

默认情况下，与不使用其功能的应用程序中的函数相反，类可能会降低性能。

真正的问题是:他们的力量是什么？

简单:类可以相互独立更新。函数不能

类可以部分更新小部件树。

考虑一个重建每一帧并返回其子帧的小部件:

class InfiniteLoop extends StatefulWidget {
  const InfiniteLoop({Key key, this.child}) : super(key: key);
  final Widget child;
  @override
  _InfiniteLoopState createState() => _InfiniteLoopState();
}

class _InfiniteLoopState extends State<InfiniteLoop> {
  @override
  Widget build(BuildContext context) {
    WidgetsBinding.instance.addPostFrameCallback((_) => setState(() {}));

    return widget.child;
  }
}

现在如果我们将整个应用程序包装在那个小部件中，会发生什么？

void main() => runApp(InfiniteLoop(child: MyApp()));

没有

当然，您将拥有一个经常在您的树中重建的小部件。但实际上，MyApp 的build 方法只会被调用一次。

这是因为 Flutter 能够在 widget 的实例不发生变化时中止树的重建。

---

类可以滥用此优化。

使用类可以巧妙地将小部件树的重建分成独立的部分。

列出一个类允许的所有潜在优化因素是不合理的，因为太多了。

以下示例是一个小部件，它采用 int 并将其格式化为 Text。要注意的是，如果 int 通过更改，此小部件将仅重建:

class Counter extends StatelessWidget {
  const Counter({Key key, this.value}) : super(key: key);

  final int value;

  @override
  Widget build(BuildContext context) {
    return Text(value.toString());
  }

  @override
  bool operator ==(Object other) =>
      identical(this, other) || (other is Counter && other.value == value);

  @override
  int get hashCode => value.hashCode;
}

这是有效的，因为 Flutter 使用 == 运算符来知道小部件是否应该更新(因此 const 构造函数是一个很好的优化因素)。

这不是唯一的解决方案，但它是函数无法做到的事情的一个很好的例子。