与其他混合平台相比, 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 树,从而提高性能