Lifecyle of a Component The following diagram shows what happens when a component is imported or added to/removed from the page. Registercomponent[Not supported by viewer]Initialize styles[Not supported by viewer]Locate affectedDOM nodes[Not supported by viewer]Bind functions &prepare data[Not supported by viewer]NoNoYesYesRun mountcallback[Not supported by viewer]InitializeBrowser events[Not supported by viewer]Rendercomponent in VDOMRender<div>component in VDOM</div>Mount sub componentsMount sub componentsRender sub componentsRender sub componentsBind getHostBind getHostCall all required rendercallbacks[Not supported by viewer]Is already rendered?Is already rendered?ComponentImport event[Not supported by viewer]component added to DOMevent[Not supported by viewer]Apply VDOMto DOMApply VDOM<div>to DOM</div>component ready[Not supported by viewer]Componentremovedfrom DOM[Not supported by viewer]ComponentDOM Noderemoved[Not supported by viewer]Remove storedprops[Not supported by viewer]Call unmountcallback[Not supported by viewer]setProps calledsetProps callednew props savedto component[Not supported by viewer]trigger re-rendertrigger re-renderon next availablebrowser frame[Not supported by viewer]unmount sub componentsunmount sub componentscall onreadycallbacks[Not supported by viewer]
