Flutter-视图树

Flutter视图树网上看了很多文章，但是大部分都没有说清楚，下面结合网上文章和自己理解说明下：

1. Widget：
   存放渲染内容、视图布局信息，负责创建Element。

2. Element：
   存放上下文，通过 Element 遍历视图树，Element 同时持有 Widget 和 RenderObject

3. RenderObject：
   根据 Widget 的布局属性，进行界面的布局绘制和事件处理

执行流程先复用widget, 不行就创建widget复用Element, 再不行就都重新创建。

针对GlobalKey在Element被创建时就写入到一个静态Map里, 并且关联了当前的Element对象，所以通过GlobalKey可以查询当前控件相关的信息。
GlobaKey可以让不同的页面复用视图

是不是有些云里雾里？没关系，如果你熟悉前端的Vue或者React框架，那么加上下面这张图，你就一目了然了：

对应关系

另外针对 [Flutter中的布局绘制流程]，强烈推荐这篇文章，写的很细。虽然是17年文章，但是目前看起来依然不过时https://segmentfault.com/a/1190000011912538