marcusshepp
8/5/2016 - 7:13 PM

notes for kanban demo on survive js

notes for kanban demo on survive js

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.