UI5 控件的生命周期是如何工作的? [英] How does the lifecycle of UI5 Controls work?

问题描述

有人可以更详细地解释一下 UI5 控件的默认事件的生命周期吗?我知道有文档中的这个页面Control 生命周期的概述，但是，我认为它非常简短并且需要更详细的内容.有人可以列出控件的事件顺序并解释每个事件的作用吗?

Can someone give a more detailed explanation about the lifecycle of the default events of a UI5 Control? I know there is this page on the documentation that gives an overview of a Control lifecycle, however, I think it is very brief and wanted something more detailed. Can someone list the order of the events of a Control and explain what every event does?

推荐答案

你说得对.Control 生命周期的细节和实现细节很好地隐藏在文档中.我会尽力为您总结我目前的理解.

You are absolutely right. The details of a Control lifecycle and implementation details are very well hidden in the docs. I'll try to sum up my so far understanding for you.

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

The lifecycle of a Control is mainly determined by:

• init :你的小控制是诞生了！函数在构造函数执行期间由框架调用.在这里做你的初始化工作.
• onBeforeRendering :由框架调用在开始呈现控件之前.在每次(重新)渲染之前触发.
• onAfterRendering :由框架调用控件渲染完成后.每次(重新)渲染后触发.
• exit :RIP 小控件！在销毁之前清理元素实例.由框架调用.在这里做你的清理.顺便说一句:如果您需要显式销毁控件/元素，您应该调用 销毁而不是直接退出.

• init : Your little Control is born! Function is called by the framework during constructor execution. Do your initialization stuff here.
• onBeforeRendering : Called by the framework before the rendering of the control is started. Triggers before every (re)rendering.
• onAfterRendering : Called by the framework after the rendering of the control has completed. Triggers after every (re)rendering.
• 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 and not directly exit.

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

Here is a sample implementation with some sample usages for the different hooks:

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 中，所有设置都已经为您应用，您可以像往常一样访问属性和聚合.

There is a basic UI5 constructor in ManagedObject. It "prepares" your UI5 object for you and calls your init function afterwards. That means in your init all settings will already be applied for you and you can access properties and aggregations as usual.

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

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

The SAPUI5 rendering is intelligent in a sense that it groups and optimizes queued rerenderings. Therefore you should never call rerender directly but instead use invalidate to mark a control for rerendering.

高频

克里斯

这篇关于UI5 控件的生命周期是如何工作的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！