THE LIFE AND TIMES OF A REACT COMPONENT The React Component Lifecycle 

HZDG.COM MATTHEWWITHANM MATTHEW DAPENA-TRETTER [email protected] HZDG 

THE VIRTUAL DOM 

DOM ELEMENTS?

• Text Content



DOM ELEMENTS! align onautocompleteerror onautocomplete onwaiting onvolumechange ontoggle ontimeupdate onsuspend onsubmit onstalled onshow onselect onseeking onseeked onscroll onresize onreset onratechange onprogress onplaying onplay onpause onmousewheel onmouseup onmouseover onmouseout onmousemove onmouseleave onmouseenter onmousedown onloadstart onloadedmetadata onloadeddata onload onkeyup onkeypress onkeydown oninvalid oninput onfocus onerror onended onemptied ondurationchange ondrop ondragstart ondragover ondragleave ondragenter ondragend ondrag ondblclick oncuechange oncontextmenu onclose onclick onchange oncanplaythrough oncanplay oncancel onblur onabort spellcheck isContentEditable contentEditable outerText innerText accessKey hidden webkitdropzone draggable tabIndex dir translate lang title childElementCount lastElementChild firstElementChild children onwebkitfullscreenerror onwebkitfullscreenchange nextElementSibling previousElementSibling onwheel onselectstart onsearch onpaste oncut oncopy onbeforepaste onbeforecut onbeforecopy shadowRoot dataset classList className outerHTML innerHTML scrollHeight scrollWidth scrollTop scrollLeft clientHeight clientWidth clientTop clientLeft offsetParent offsetHeight offsetWidth offsetTop offsetLeft localName prefix namespaceURI id style attributes tagName parentElement textContent baseURI ownerDocument nextSibling previousSibling lastChild firstChild childNodes parentNode nodeType nodeValue nodeName click getAttribute setAttribute removeAttribute getAttributeNode setAttributeNode removeAttributeNode getElementsByTagName hasAttributes getAttributeNS setAttributeNS removeAttributeNS getElementsByTagNameNS getAttributeNodeNS setAttributeNodeNS hasAttribute hasAttributeNS matches focus blur scrollIntoView scrollIntoViewIfNeeded getElementsByClassName insertAdjacentElement insertAdjacentText insertAdjacentHTML webkitMatchesSelector createShadowRoot getDestinationInsertionPoints getClientRects getBoundingClientRect requestPointerLock animate remove webkitRequestFullScreen webkitRequestFullscreen querySelector querySelectorAll ALLOW_KEYBOARD_INPUT insertBefore replaceChild removeChild appendChild hasChildNodes cloneNode normalize isSameNode isEqualNode lookupPrefix isDefaultNamespace lookupNamespaceURI compareDocumentPosition contains ELEMENT_NODE ATTRIBUTE_NODE TEXT_NODE CDATA_SECTION_NODE ENTITY_REFERENCE_NODE ENTITY_NODE PROCESSING_INSTRUCTION_NODE COMMENT_NODE DOCUMENT_NODE DOCUMENT_TYPE_NODE DOCUMENT_FRAGMENT_NODE NOTATION_NODE DOCUMENT_POSITION_DISCONNECTED DOCUMENT_POSITION_PRECEDING DOCUMENT_POSITION_FOLLOWING DOCUMENT_POSITION_CONTAINS DOCUMENT_POSITION_CONTAINED_BY DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC addEventListener removeEventListener dispatchEvent 

REACT ELEMENTS

• Text Content



JSX IS NOT HTML 

REACT ELEMENTS React.DOM.ul( {className: 'my-list'}, React.DOM.li( 'Text Content' ) ) 

REACT COMPONENTS 

f() : ReactElement 

COMPONENTS React.createClass({ render: function() { return ( Hello {this.props.name} ); } }); 

THE COMPONENT LIFECYCLE 

1. MOUNTING 2. UPDATING 3. UNMOUNTING 

Render UNMOUNTING MOUNTING UPDATING Prop/State Changes Removal 

• componentWillMount() • componentDidMount() • componentWillReceiveProps() • shouldComponentUpdate() • componentWillUpdate() • componentDidUpdate() • componentWillUnmount() 

React.createClass({ render: function() { return ( Hello {this.props.name} ); }, componentWillMount: function() { } }); 

Render UNMOUNTING MOUNTING UPDATING Prop/State Changes Removal 

React.render( element : ReactElement, container : DOMElement, [callback : function] ) : ReactComponent 

React.renderToString( element : ReactElement ) : string 

React.createClass({ render: function() { return ( ); } }); 

• componentWillMount() • componentDidMount() • componentWillReceiveProps() • shouldComponentUpdate() • componentWillUpdate() • componentDidUpdate() • componentWillUnmount() 

• Called once per component instance • Only lifecycle method called on the server (React.renderToString) • Name is somewhat misleading • componentDidMount() isn’t necessarily called after • Think “constructor” componentWillMount() 

• Called once per component instance • Only invoked on client (React.render()) • First time DOM node is available (via this.getDOMNode()) • Use for interacting with browser APIs or JS frameworks • jQuery • XHR componentDidMount() 

Render UNMOUNTING MOUNTING UPDATING Removal Prop/State Changes 

element.setProps( nextProps : object, [callback : function] ) 

element.replaceProps( nextProps : object, [callback : function] ) 

element.setState( nextState : object, [callback : function] ) 



• componentWillMount() • componentDidMount() • componentWillReceiveProps() • shouldComponentUpdate() • componentWillUpdate() • componentDidUpdate() • componentWillUnmount() 

• Called when component is receiving new props • Provides a chance to update state in response to a prop change without triggering an extra render • Optimization over calculating state each render componentWillReceiveProps(nextProps : object) 

• Invoked before rendering when new props or state are being received • Provides a chance to cancel rendering shouldComponentUpdate(nextProps : object, nextState : object) : boolean 

• Invoked before DOM is updated • Provides a chance to store values before rendering for comparison in componendDidUpdate() • setState() can’t be used here • Probably the least-used lifecycle method componentWillUpdate(object nextProps, object nextState) 

• Invoked after DOM update • Useful for triggering animations componentDidUpdate() 

Render UNMOUNTING MOUNTING UPDATING Prop/State Changes Removal 

React.unmountComponentAtNode( container : DOMElement ) : boolean 





• componentWillMount() • componentDidMount() • componentWillReceiveProps() • shouldComponentUpdate() • componentWillUpdate() • componentDidUpdate() • componentWillUnmount() 

• Invoked before component is unmounted from DOM • “cleanup” hook • Remove timers • Abort XHR • Cancel tweens • Remove event listeners componentWillUnmount() 

Render UNMOUNTING MOUNTING UPDATING Prop/State Changes Removal 

HZDG.COM MATTHEWWITHANM MATTHEW DAPENA-TRETTER [email protected] HZDG