Flutter 小部件生命周期和渲染逻辑

1。生命周期逻辑

1.1 什么是生命周期

• 系统内嵌回调方法
• 开发者知道当前 widget 处于什么状态 ❙ 生命周期函数 初始化状态和数据在指定时间
• 内存管理相关逻辑

2. widget 生命周期

2.1 无状态

• widget 构造方法 build2 有状态 wid。
  • widget 的构造函数
  • Widget 调用 _state 的构造函数
  • state 的 init 方法
  • state 的 didChangeDependencies 方法，该方法依赖于 InheritedWidget 的外观。变更后仍受邀请。
  • state的build方法，当调用setState方法时，先调用build方法
  • state的deactivate方法，然后在discard方法
  • 销毁widget时调用dispose方法3. Widget 显示逻辑

    3.1 Widget 子类

    Widget 子类包括 StatefulWidget、StatelessWidget 和 Render ObjectWidget。我们仍然使用前两个。 Render ObjectWidget 不能直接使用，但它有几个我们会经常使用的子类。

    3.2 Render ObjectWidget

    继承自Render ObjectWidget的类被添加到渲染树中。 Row和Column间接继承自RenderObjectWidget。

    我们看一下详细的继承关系：

    Row和Colum都继承了Flex，Flex继承了MultiChildRenderObjectWidget，MultiChildRenderObjectWidget继承了ObjectWRender。

    注意：并非所有小部件都是独立出现的！只有继承了Render ObjectWidget的人才会创建Render Object！

    3.3 Flutter 中的三棵树

    Widget 树、Element 树和 Render 树 使用 Android Studio 窗口右侧的“Flutter Inspector”可以看到 Widget 树和 Render 树，如图图：

    3.4元素树函数

    在Framework.dart中，看StatelessWidgetz和StatefulWidget的声明文档，都会有createElement()方法，图中的StatelessWidget：stafull中可以看到图片：

    每个小部件都会创建一个元素对象。这是因为Widget树不稳定，变化频繁。如果没有元素树，每次发生小的变化时，表面都会重新渲染，这极大地影响了性能。元素树中的节点和部件树中的节点之间存在一一对应的关系。如果小部件中的节点发生变化，则该元素仅更改相应的节点，并且仅需要渲染更改的节点。

    3.5 渲染逻辑

    3.5.1 StatefullWidget 渲染逻辑

    StatefullWidget 继承自 Widget，隐式调用 createElement 方法和 mount 方法。

    createElement方法只用一行代码就实现了，调用StatefulElement构造函数，参数是this StatefullWidget。如图：

    StatefulElement继承ComponentElement。系统自动调用mount方法，该方法在ComponentElement中实现：

    mount调用rebuild方法。重建方法在父类中实现。最后调用performRebuild方法：

    使用command+option+点击performRebuild可以看到列表，如图：

    如果看到ComponentElement中实现了这个方法，就会跳回来：

    其实，就在rebuild方法的正下方，在实现中构建名称为method，点击它，使用前面提到的组合键，选择StatefulElement元素：

    返回StatefulElement类定义

    _state.build( this ）我们在StatefulWidget代码中调用这个方法，我们将其编写为state的构造方法。 state 初始化是在创建 StatefulElement 并调用 createState() 时初始化的。这个方法就是我们编写StatefulWidget时定义的CreateState()方法。

    参数是BuildContext上下文，表示上下文元素。 。这一点也可以通过BuildContext定义注释来证实：

    简单总结一下StatefullWidget的显示过程：

    StatefullWidget创建StatefulElement

    • CompleteStatefulElement创建所有如何创建状态
    • Assignment widget声明state组装方法并传递自身（元素）。StatelessWidget创建StatelessElement
      • StatelessElement继承CompentElement行或列父类ObjectWidget

        RenderObjectWidget创建Render元素

        • Render元素创建RenderObject
        • Flutter调用attach方法。b Flutter调用mount方法。 作者：DragonetZ 链接：https://juejin. im/post/5eedddeee51d45740e427369
          来源：掘金
          版权归作者所有。商业转载请联系作者获得许可。非商业转载请注明来源。