面试题：Flutter中Widget树与渲染树的关系

Question

说明Flutter中Widget树和渲染树之间的关联与区别，当Widget树发生变化时，渲染树是如何响应的？请举例说明相关的原理和流程。

Answer 1

关联

1. 构建关系：Widget树是描述UI结构的蓝图，每个Widget会对应一个或多个RenderObject，这些RenderObject构成渲染树。例如，一个Container Widget会创建一个RenderBox对象加入到渲染树中，Widget为渲染树提供配置信息，如大小、颜色等。
2. 父子关系对应：Widget树的父子关系在渲染树中也基本保持一致。父Widget的RenderObject会包含子Widget对应的RenderObject，例如Row Widget的RenderFlex会管理其子Widget对应的RenderObject的布局排列。

区别

1. 职责不同：
   • Widget树：主要负责描述UI的结构和配置，是不可变的（stateless Widget）或可变状态可管理的（stateful Widget）。例如Text Widget定义了文本的显示内容、样式等信息。
   • 渲染树：专注于UI的渲染和布局，负责将Widget的配置信息转化为屏幕上可见的内容，它会处理大小、位置等实际渲染相关的操作。如RenderParagraph负责将Text Widget中的文本进行排版渲染。
2. 更新机制不同：
   • Widget树：当状态改变或父Widget重建时，Widget树可能会整体或部分重建。例如，一个StatefulWidget内部状态改变时，build方法会被调用，可能会返回新的Widget树结构。
   • 渲染树：渲染树不会每次Widget树改变都完全重建。Flutter使用了高效的diff算法，对比新旧Widget树，只更新那些需要改变的RenderObject，而不是整个渲染树。

当Widget树发生变化时渲染树的响应

1. Widget重建：当StatefulWidget的状态改变或父Widget重建导致Widget树部分改变时，build方法会被调用，生成新的Widget树。
2. Widget diff算法：Flutter框架会对比新旧Widget树，找出有变化的Widget。例如，一个文本Widget的文本内容改变，框架能识别出该Widget发生了变化。
3. RenderObject更新：对于那些被识别为有变化的Widget，对应的RenderObject会根据新Widget的配置进行更新。如果Widget的布局属性改变，RenderObject会重新计算布局；如果是视觉属性如颜色改变，RenderObject会更新相应的绘制信息。例如，Container Widget的颜色属性改变，对应的RenderBox会更新颜色信息并触发重绘。
4. 局部更新：只有那些需要改变的RenderObject及其子树会被更新，而不是整个渲染树。这样能有效减少渲染开销，提高性能。比如在一个复杂列表中，只有某一项Widget改变，仅该项对应的RenderObject及其子树会被更新，而其他项的渲染树部分保持不变。