> For the complete documentation index, see [llms.txt](https://ryukiedev.gitbook.io/wiki/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ryukiedev.gitbook.io/wiki/flutter/22.widget-shu-render-shu-element-shu.md).

# 22.Widget树\&Render树\&Element树

### Widget 的渲染原理

不是所有的 `Widget` 都会被独立渲染。只有继承 `RenderObjectWidget` 的才会创建 `RenderObject` 对象。

在 `Flutter` 中，有三个树非常重要， `Widget树` 、 `Render树` 、 `Element树`。`Flutter引擎`是针对 `Render树` 进行渲染。

### Widget树 、 Render树 、 Element树

* 每一个 `Widget` 都会创建一个 `Elememt` 对象
  * 隐式调用 `createElement` 方法。
    * `Element` 加入 `Element树` 中
    * 它会创建三种 `Element`
* `RenderElement` 主要是创建 `RenderObject` 对象
  * 继承 `RenderObjectWidget` 的 `Widget` 会创建 `RenderElement`
  * `Flutter` 会调用 `mount` 方法，调用 `createRanderObject` 方法
* `StatefulElement` 继承 `ComponentElement`
  * `StatefulWidget` 会创建 `StatefulElement`
  * 调用 `createState` 创建 `State`
  * 将 `Widget` 赋值给 `state`
  * 调用 `state` 的 `build` 方法，并将自己 `Element` 传出去
    * `build` 里面的 `context` 就是 `element`
* `StatelessElement` 继承 `ComponentElement`
  * `StatelessWidget` 会创建 `StatelessElement`
  * 主要就是调用 `build` 方法，并将自己 `Element` 传出去