【ExtJS】关于Component生命周期

时间:2023-01-05 20:24:49

  很久以前就学习过extjs的组件生命周期,很久之后,再回头看一看,又增加好多新的认识。


  extjs组件生命周期大体分为3个阶段:初始化、渲染、销毁。

  第一阶段:初始化

  初始化工作开始于组件的诞生,所有必须的配置设定、事件注册、预渲染处理等都在此时进行。

  1、应用组件的配置:

    当初始化一个组件的实例时,传递的组件配置对象包含了希望让组件拥有的所有功能,这些都是在Ext.Component基类的前几行代码完成的。

  2、注册事件:

    诸如enable/disable,show,hide,render,destory,state restore,state save等等事件,是所有继承于Ext.Component的组件都会默认拥有的基本事件,它们将会在执行某些行为之前或之后被触发。

  3、ComponentMgr注册组件实例:

    在这里,每一个组件的实例都会生成一个字符串作为其ID值,供Ext.Cmp()方法来获得该实例的引用。在实例的配置中,可以通过配置id值给其传递ID值,不过如果设置了同样的ID值,Ext.Cmp()方法找到的实例引用将会是最后一个设置了该ID的组件。也就是说,最后设置的ID值将会覆盖前面的所有相同ID值。

  4、调用initComponent()方法:

    关于initComponent()方法,在直接或间接继承了Ext.Component基类的组件中,该方法会在Component的构造函数constructor中被调用。

    这里来看看其回调顺序:

    Ext.Window ==> Ext.Panel ==> Ext.Container ==> Ext.BoxComponent ==> Ext.Component

    在自定义组件时,一般都会覆盖父类的initComponent()方法,并且在最后用this.callParent()来回调父类函数,则在实例化组件的过程中,container的initComponent方法里的this已经变成了该实例对象本身。如果不这么做,譬如直接将itsms写入配置中,则在内部调用container的initComponent方法时,this所指的对象将不是目标实例化的对象。配置内的items的内容将残留在new的对象上,从而导致在连续实例化同一个自定义组件时,除了第一个实例,后面的实例都将失败的结果。

    于是在自定义组件的时候,最好将配置项写入initComponent方法中,并在配置项最后使用this.callParent()来回调其父类函数。有许多工作都会在initComponent方法里完成。例如注册自定义的事件、设定data stores、创建子控件等。initComponent可以看做constructor的补充,因此经常用于扩展组件的入口点。

  5、加载插件和组件渲染:    

    如果在constructor的参数中传递了plugin对象,plugin的init方法将会被调用,同时会将父对象作为参数传递进init方法里。如果组件中配置了renderTo或者applyTo,则组件将马上被渲染,否则,它会被延迟渲染,直到组件被显式调用显示,或被它的容器所调用。


 第二阶段:组件呈现

  1、触发beforerender事件:

    这是在组件被render渲染前被调用的。用以提供处理函数或者阻止组件的继续渲染。

  2、设置容器:

    如果没有父容器被指定,默认它的父对象被指定为它的容器。

  3、调用onReader方法:    

    这是为子类执行呈现工作的一个非常重要的方法,这是一个模板方法,在子类中可以根据需来重写它的实现逻辑。直接被创建的类的  onRender  首先被调用,然后它可以通过superclass.onRender 来调用基类的 onRender 方法。这个方法很容易被重新实现,如果需要你可以在继承关系的任意类中重写这个方法。  

  4、不隐藏组件     

    默认,大多数组件都会通过设置像 x-hidden 这个样式来使它隐藏。当 autoShow 设置为true 时,这个隐藏功能的样式会被移除。

  5、应用自定义样式

    所有的 Component 子类都支持指定 cls 配置属性,通过它可以为 Component 所呈现的HTML 元素指定 CSS 样式。通过添加组件的 cls 属性,使用标准的样式规则,是一个自定义可视组件显示效果的非常完美的方法。

  6、render 方法被触发

    简单的通知组件已经被成功的呈现了。

  7、调用 afterRender

    这是另一个模板方法,子类根据逻辑需要可以重新实现或覆盖该方法。所有的子类可以通过调 superclass.afterRender.来调用父类的方法。

  8、组件隐藏或不可用

    根据配置选项的值来设置。

  9、状态事件被初始化

    可以状态化的组件会定义一些事件来指定状态的初始化和保存。如果提供,这些事件会被添加。


  第三阶段:销毁  

  1、触发 beforedestroy      

    这是一个可取消的事件,如果需要,可能通过提供事件代理来阻止组件被销毁。   

  2、调用 beforeDestroy 方法     

    又一个模板方法,在子类中可以重新实现和调用父类的方法。   

  3、移除事件监听者(代理)    

    如果组件已被呈现,则移除它底层的 HTML 元素的事件监听列表,然后将元素从 DOM中移除。

  4、onDestroy 被调用

    这个还是一个模板方法,在子类可以重新实现。这里需要注意的是,容器类提供了一个默认的 onDestroy 实现,它会循环销毁它的成员组。

  5、组件实例从 ComponentMgr 中反注册

    不可以再通过 Ext.getCmp 获取到对象实例。

  6、destroy 事件被触发

    这只是一个简单的提醒,表示组件销毁成功。

  7、移除 Component 上的事件代理

    组件可以独立于元素,自己拥有事件代理,如果存在则移除它们。


  ps:以上内容,包括了前人的理论概括,加上自己的学习认识,权作记录,自勉!