如果build方法可以多次调用,Flutter框架如何优化widget渲染?

How Flutter framework optimizes the widget rendering if build method can be called many times?

我有一个简单的问题。在 Flutter 文档中解释了 build 方法可以被框架多次调用,建议我们只通过 build 方法调用 return 个小部件。但是即使我们 return 只有小部件,这不会导致一些性能问题吗?如果build方法一秒钟被调用20次,是不是意味着widgets会被渲染20次,应该不会很慢吧?如果 Flutter 框架优化渲染小部件,如何?

能否请您参考一些详细的文档或答案?

这真是个好问题。 Flutter 团队将 this really useful video on YouTube 放在一起,完美而详细地解释了这一点。本质上,您需要了解 Widget 树和元素树之间的区别。小部件树中的每个小部件都由称为元素的东西支持,而这个元素是 Flutter 实际上用来在屏幕上绘制“东西”的东西。从程序员的角度来看,小部件是元素的可视化表示,而元素是小部件在屏幕上的实际可视化表示。优化是在您通常无法直接使用的元素树级别完成的。

看看那个video,这里有很多有用的信息

由于推荐的视频和 Flutter 文档,这里解释了 Flutter 如何处理渲染优化。

Flutter 不仅有 widget 树。对于 UI 上的每个视觉表示,实际上有 3 个主要树,它们是 Widget TreeElement TreeRender对象.

小部件树 是小部件的层次结构,包括所有创建的小部件。但是由于小部件是不可变的并且随着时间的推移在树中发生变化,因此应该有另一棵树称为 Element Tree 来保持状态并优化小部件渲染。

Element Tree 是 Fl​​utter 用来在屏幕上渲染 widget 的树,与 Widget Tree 因为每当 Widget Tree 中的 widget 发生变化时,如果新 widget 的类型与以前相同,则元素树会保留相应 widget 的元素。例如,如果您只更改小部件树中的 Text 小部件的文本,则 小部件树 将被更改,但 元素树 是将保持不变,因为文本小部件仍然具有与以前相同的 runtimeType

所以渲染优化主要是关于可重用性。 Flutter 框架正在尝试尽可能多地重用对象。即使 Widget Tree 随着时间的推移发生了很大变化,Element Tree 也没有像 Widget Tree 并在小部件类型未更改的情况下使用相同的元素对象。