Virtual DOM

The in-memory representation of the DOM against which the render function is compared to calculate the fastest modification to the DOM. Similar to an ORM which manages intelligent persistence to the data layer.

State and Props

State represents mutable data usually passed in (as props) or set within a component.

this.setState()

The line of code above (which enables changes to state to be made and/or set) will trigger a re-render.

A prop is an immutable datum usually residing in the top-level component. Props represent configuration options.

Both prop and state changes trigger re-renders which can be controlled within the appropriate lifecycle method.

Flux

Flux is a unidirectional architecture design pattern whereby information flows in one direction (from props to state).


Mixins

Mixins are cross-component functionalities expressed as functions.


Statics

Statics are functions executed prior to and independent of the React lifecycle.


The React Lifecycle

The React lifecycle can be divided into three parts:

Mounting - the process by which a component is added to the DOM.
Updating - a component is re-rerendered in the DOM by updates to props or state.
Unmounting - a component is removed from the DOM.


Mounting

ES5

//In order

statics: { 
    //Specify statics here
},
propTypes: { 
    //Specify, enforce, and/or validate prop types
},
defaultProps: { 
    //Specify the default props
},
getInitialState() { 
    //Specify the initial state
},
componentWillMount() { 
   /** The lifecycle stage triggered prior to rendering 
    but after initialization of props or state */
},

componentDidMount() { 
   /** The lifecycle stage triggered after rendering 
    but before any updates */
},


ES6

//In order of execution

constructor(props) {
    //Override props, set props, set state here
    super(props);
}

statics: { 
    //Specify statics here
}

componentWillMount() { 
   /** The lifecycle stage triggered prior to rendering 
    but after initialization of props or state */
}

componentDidMount() { 
   /** The lifecycle stage triggered after rendering 
    but before any updates */
}

Updating

//In order of execution

componentWillReceiveProps(nextProps) {
  /** Triggered on receiving new props. This lifecycle stage 
  represents an opportunity to modify state - this.setState() - without 
  triggering a re-render. It occurs prior to an update and when        
  a component is receiving props. This method is not called in initial 
  render. */ 
},

shouldComponentUpdate(nextProps, nextState) {
    /** This lifecycle stage represents an opportunity to modify 
    props or state without triggering a re-render. By returning a 
    falsy value you can prevent a re-render, else it will render. 
    Not called during initial render. */ 
},

componentWillUpdate(nextProps, nextState) {
    /** A preparation function that enables changs to props or 
    state to be made prior to update. this.setState() cannot be 
    used within this method. */   
},

componentDidUpdate(prevProps, prevState) {
    /** Triggered after props and/or state were received and updated 
    in the DOM - not called in initial render */   
},

Unmounting


componentWillUnmount() {
    /** The lifecycle stage triggered immediately after 
    the component is removed from the DOM */   
},


Misc

this.forceUpdate()

The line of code above will trigger a re-render with requiring a change to state or props.

Use ref to set handles in html elements:

<label style={loginCss}>Email: <input type='email' ref={(ref) => this.email = ref} placeholder='you.are@awesome.com'/></label>


Above we save the input value as a ref to be accessed within the component logic.

Additional Resources

Spec