sapui5 - UI5 控件的生命周期是如何工作的？

Question

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

Answer 1

你是绝对正确的。控制生命周期的细节和实现细节都很好地隐藏在文档中。我会尽力为你总结一下我到目前为止的理解。

Control 的生命周期主要由以下因素决定:

init : 你的小Control诞生了!函数在构造函数执行期间由框架调用。在这里做你的初始化工作。

onBeforeRendering :在控件开始渲染之前由框架调用。在每次(重新)渲染之前触发。

onAfterRendering :在控件渲染完成后由框架调用。每次(重新)渲染后触发。

exit : RIP 小控制!在销毁之前清理元素实例。由框架调用。在这里做你的清理工作。顺便说一句:如果您需要显式破坏控件/元素，您应该调用 destroy而不是直接退出。

这是一个示例实现，其中包含不同钩子(Hook)的一些示例用法:

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 构造函数.它为您“准备”您的 UI5 对象，然后调用您的 init 函数。这意味着在您的 init 中，所有设置都已为您应用，您可以照常访问属性和聚合。

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

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

高频

克里斯