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 abovedidUpdate
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 DOMafterRender
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.
source to share
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
:
queue" data-src="/img/257b935a6ca0ef8547326b4f11213607.png" class=" lazyloaded" src="https://fooobar.com//img/257b935a6ca0ef8547326b4f11213607.png">
source to share