UI5 控件的生命周期如何运作？

Question

谁能更详细地解释一下UI5控件默认事件的生命周期？我知道 this page on the documentation 给出了 Control 生命周期的概述，但是，我认为它非常简短，需要更详细的内容。有人可以列出控件事件的顺序并解释每个事件的作用吗？

Answer 1

你完全正确。控件生命周期的细节和实现细节很好地隐藏在文档中。我会试着总结一下我到目前为止对你的理解。

控件的生命周期主要由以下因素决定：

init : 你的小控件诞生了！函数在构造函数执行期间由框架调用。在这里做你的初始化工作。
onBeforeRendering ：在开始呈现控件之前由框架调用。在每次（重新）渲染之前触发。
onAfterRendering ：在控件呈现完成后由框架调用。每次（重新）渲染后触发。
exit : RIP little Control! Cleans up the element instance before destruction. Called by the framework. Do your clean up here. Btw: If you need to explicitly destruct a Control/Element you should call destroy而不是直接退出。

这是一个示例实现，其中包含针对不同挂钩的一些示例用法：

sap.ui.core.Control.extend("a.sample.Control", {
  init : function() {
    // instantiate a sub-control
    this._btn = new sap.m.Button(); 
  },

  onBeforeRendering : function() {
    // deregister a listener via jQuery
    this.$("subelement").off("click", this.subElementClick);
  },

  onAfterRendering : function() {
    // register a listener via jQuery on a sub-element
    this.$("subelement").on("click", this.subElementClick);
  },

  subElementClick : function() {
    // do stuff
  },

  exit : function() {
    // clean up sub-controls and local references
    this._btn.destroy();
    delete this._btn;
  }

});

为什么我不应该在构造函数中执行初始化操作？

ManagedObject中有一个基本的 UI5 构造函数。它 "prepares" 你的 UI5 对象，然后调用你的 init 函数。这意味着在您的 init 中，所有设置都已经为您应用，您可以像往常一样访问属性和聚合。

为什么我不应该调用重新渲染？

从某种意义上说，SAPUI5 渲染是智能的，它可以对排队的重新渲染进行分组和优化。因此，您不应该直接调用 rerender，而是使用 invalidate 来标记要重新呈现的控件。

高频

克里斯

Answer 2

UI5 为 Controller 实现提供了预定义的生命周期挂钩。您可以向控制器添加事件处理程序或其他功能，控制器可以触发事件，其他控制器或实体可以注册这些事件。

UI5 提供了以下生命周期钩子：

onInit()：当视图被实例化并且其控件（如果可用）已经创建时调用；用于在显示之前修改视图以绑定事件处理程序并进行其他一次性初始化
onExit()：视图销毁时调用；用于释放资源和完成活动
onAfterRendering()：在渲染视图时调用，因此它的 HTML 是文档的一部分；用于对 HTML 进行 post 渲染操作。 SAPUI5 控件在渲染后得到这个钩子。
onBeforeRendering()：每次渲染View时调用，在调用Renderer之前，HTML放在DOM-树。

^{来源：ui5.sap.com/#/topic/121b8e6337d147af9819129e428f1f75}

UI5 控件的生命周期如何运作？

How does the lifecycle of UI5 Controls work?

sapui5