17 个提高性能的 Flutter 最佳实践

与其他混合平台相比， Flutter 性能够快吗？答案是肯定的，但是出于这种考虑，让我们来看看一些令人惊叹的性能和优化实践。

正文

1. 使用 Widgets 代替函数

不要这样用它

Widget _buildFooterWidget() {
  return Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text('This is the footer '),
         );
}. 

像这样使用它

class FooterWidget extends StatelessWidget {
  @override

   Widget build(BuildContext context) {
  return Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text('This is the footer '),
         );
      }
} 

如果一个函数可以做同样的事情，Flutter 就不会有 StatelessWidget。

类似地，它主要是针对公共 widgets 的，这些 widgets 可以重复使用。私人函数只能使用一次并不重要ーー尽管意识到这种行为仍然是好的。

使用函数而不是类之间有一个重要的区别，那就是: 框架不知道函数，但是可以看到类。

考虑下面的“ widget”函数:

Widget functionWidget({ Widget child}) {
    return Container(child: child);
} 

这样使用:

functionWidget(
    child : functionWidget()
) 

而且它是等价的:

class ClassWidget extends StatelessWidget {
final Widget child;
const ClassWidget({Key key, this.child}) : super(key: key); @override
 Widget build(BuildContext context) {
      return Container(
               child: child,
              );
  }
} 

这样使用:

new ClassWidget(
  child : new ClassWidget(),
) 

在纸面上，两者似乎做了同样的事情: 创建 2 个容器，一个嵌套在另一个中。但现实情况略有不同。

对于函数，生成的 widgets 树如下所示:

Container
  Container 

对于类，widgets 树是:

ClassWidget
  Container
    ClassWidget
      Container 

这一点很重要，因为它改变了框架在更新 widgets 时的行为。

为什么这很重要

通过使用函数将 widgets 树拆分为多个 widgets，您将自己暴露在 bug 之中，并错过了一些性能优化。

不能保证使用函数会出现 bug，但是使用类可以保证不会遇到这些问题。 the issues:

下面是一些在 Dartpad 上的交互式例子，你可以自己跑步来更好地理解这些问题:

• dartpad.dev/1870e726d7e… 这个例子展示了如何通过分割你的应用程序的功能，你可能会不小心破坏诸如 AnimatedSwitcher 之类的东西
• dartpad.dev/a869b21a2eb… 这个例子展示了类如何允许更细粒度地重新构建 widgets 树，从而提高性能