Flutter 渲染核心概念

1. 三棵树

• Widget 树: UI 的蓝图，描述界面结构。
• Element 树: Widget 树的实例，管理生命周期和状态。
• RenderObject 树: 负责实际渲染，计算布局、绘制和处理输入。

2. 渲染流程

1. 构建 (Build): 创建或更新 Widget 和 Element 树。
2. 布局 (Layout): 自顶向下计算大小和位置。
3. 绘制 (Paint): 自底向上绘制内容。
4. 合成 (Compositing): 将绘制内容合成为图层，发送至 GPU。

3. 增量更新

• 只重建受影响的 Widget 和 Element。
• 使用脏标记（Dirty Marking）跟踪需要重绘的 RenderObject。

性能优化

• 改进文本渲染
• 高效图像缓存
• 优化内存管理
• 复用 RenderObject
• 使用 const 构造函数和 Key

Flutter vs React 渲染机制比较

Flutter

• 三层结构（Widget、Element、RenderObject）协作
• 精确定位需要更新的 UI 部分
• 高效增量更新

React

• 虚拟 DOM 依赖浅比较
• 默认从上到下重新渲染整个组件树
• 需要手动优化以避免不必要的重渲染

调试技巧

• 使用 Flutter DevTools 的 Inspector 高亮显示重绘区域
• 分析组件重绘原因，优化更新逻辑

参考资料

• Flutter: 调试组件重绘
• Flutter DevTools: 重绘高亮
• 减少 Flutter 不必要渲染