Which loop queue does each run of the lifecycle hook of a new component?

From the Ember blog, these are the new component lifecycle hooks.

On first render (in order):

  • didInitAttrs

    runs after the component has been created and the attrs passed are guaranteed to be present. In Ember 1.13, attributes will be available as this.get ('attrName').
  • didReceiveAttrs

    runs after didInitAttrs and it also runs on subsequent repeaters, which is useful for logic that is the same for all renders. It doesn't run when the component has been re-rendered from the inside.
  • willRender

    is executed before the template is rendered. It is triggered when the template is updated for any reason (both initial and re-rendered, and whether the change was caused by a change or re-handling of attrs).
  • didInsertElement

    runs after the template has been rendered and the element is in the DOM.
  • didRender

    runs after didInsertElement (it also runs on subsequent repeaters).

When reprocessing (in order):

  • didUpdateAttrs

    executed when the attributes of the component have been changed (but not when the component is being redrawn, via the component .rerender, component.set, or changes to the models or services used by the template).
  • didReceiveAttrs

    , as mentioned above.
  • willUpdate

    executed when a component is rendered differently, including component.rerender (), component.set (), or changes to the models or services used by the template.
  • willRender

    , as mentioned above
  • didUpdate

    is triggered after re-rendering the template and the DOM is now updated.
  • didRender

    , as mentioned above.

These are the run queue queues:

  • Queue sync

    contains sync jobs
  • A queue actions

    is a shared work queue and usually contains scheduled tasks, for example. promises
  • The queue routerTransitions

    contains the hop jobs in the router
  • The queue render

    contains tasks to be rendered, they usually update the DOM
  • afterRender

    contains tasks to run after all previously scheduled render tasks have finished. This is often useful for third party DOM manipulation libraries that only need to run after the entire DOM tree has been updated.
  • The queue destroy

    contains jobs to complete bursting objects that other jobs planned to destroy.
+3


source to share


1 answer


I have looked through with browser development tools how the Ember run loop works, and I can tell that:

didInitAttrs

and didReceiveAttrs

a queue fire render

for one simple component:

Ember.component.extend()

      



and just {{yield}}

as a template.

Queued Call render

: Call <code> render </code>
      <br>
        <script async src=
queue" data-src="/img/257b935a6ca0ef8547326b4f11213607.png" class=" lazyloaded" src="https://fooobar.com//img/257b935a6ca0ef8547326b4f11213607.png">

0


source







All Articles