covid19-dashboard/docs/tutorials/03_ComponentLifecycle.html

Dashboard App displaying COVID-19 numbers by country

<div class="neo-header-text-container">
    <span class="neo-header-text">Tutorial: Component Lifecycle</span>
</div>
<article>
    <ol>
        <li>constructor</li>
        <li>onConstructed</li>
        <li>init</li>
        <li>render</li>
        <li>mount</li>
        <li>addDomListeners</li>
        <li>destroy [optional]</li>
    </ol>
    <p>(1) Since constructors of ES6 classes may not use &quot;this&quot; before the parent call, this one does very
        little,
        except registering the new Component to the Component Manager.</p>
    <p>(2) onConstructed gets called after the constructor chain is done and basically the replacement for the
        constructor logic.</p>
    <p>(3) init gets called after the onConstructed chain is done and will call render in case the autoRender-config is
        set to true.</p>
    <p>(4) render will call the Vdom worker sending the vdom (markup) and getting a vnode back.
        Instances with children (e.g. Container -&gt; items) will delegate the sub-trees (vnodes) downwards.</p>
    <p>(5) mount will send the full vnode-tree of your app (containing the outerHTML) to the main thread and create the
        real DOM.</p>
    <p>(6) Since the vdom &amp; vnode should not be aware of any DOM listeners, applying DOM listeners to the real DOM
        happens after mount.</p>
    <p>(7) Destroying a Component will unregister it from the Component Manager &amp; clear the listener references</p>
</article>