http://survivejs.com/react/getting-started/understanding-react-components/
React components can be in three phases during their lifecycles:
- mounting
methods include:
componentWillMount()
This gets triggered once before any rendering happens. ie could use and ajax
to setState on this component with data.
componentDidMount()
This get triggered after initial rendering has completed. You have access to the
DOM here making it the place to do this like hookup a jQuery plugin.
- mounted
methods include:
ComponentWillReceieveProps(object nextProps)
This triggers when the component receives new props. You could for instance update
the components state based on the new props.
shouldComponentUpdate(object nextProps, object nextState)
allows for optimization of rendering. Checking the components state and props
allow you to decide how to procede. If there is nothing to do return false.
componentWillUpdate(object nextProps, object nextState)
This method gets triggered after shouldComponentUpdate and before render.
No access to setState here, but you can set class properties.
componentDidUpdate()
This is triggered after render. You can modify the DOM here.
This method is useful for adapting other code to work with React.
- unmounting
componentWillUnmount
This will trigger right before a component is unmounted from the DOM.
This is the time to do clean up ie remove timers, custom DOM elements etc.
Oftern componentDidMount and componentWillUnmount come as a pair. If you set up
something DOM related in componentDidMoount you should remember to clean it up
in componentWillUnmount.