[React] React Fundamentals: Component Lifecycle - Mounting Basics

React components have a lifecycle, and you are able to access specific phases of that lifecycle. This lesson will introduce mounting and unmounting of your React components.

Mounting: componentWillMount

Invoked once, both on the client and server, immediately before the initial rendering occurs. If you call setState within this method, render() will see the updated state and will be executed only once despite the state change.

Mounting: componentDidMount

Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, the component has a DOM representation which you can access via React.findDOMNode(this).

If you want to integrate with other JavaScript frameworks, set timers using setTimeout orsetInterval, or send AJAX requests, perform those operations in this method.

Unmounting: componentWillUnmount

Invoked immediately before a component is unmounted from the DOM.

Perform any necessary cleanup in this method, such as invalidating timers or cleaning up any DOM elements that were created in componentDidMount.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>React Lesson 9: Mounting</title>
</head>
<body>

<div id="panel"></div>

<button onClick="Render()">Render</button>
<button onClick="Unmount()">Unmonut</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
<script type="text/jsx">

    var App = React.createClass({
        getInitialState: function(){
            return {
                val: 0
            }
        },
        update: function() {
          var newVal = this.state.val + 1;
          this.setState({val: newVal});
        },
        componentWillMount: function() {
            console.log("Will mount");
        },
        componentDidMount: function() {
            console.log("Did mount");
        },
        componentWillUnmount: function() {
            console.log("Byebye");
        },
        render: function(){
            console.log("render");
            return <button onClick={this.update}>{this.state.val}</button>
        }
    });

    window.Render = function() {
        React.render(<App />, document.getElementById('panel'));
    }

    window.Unmount = function() {
        React.unmountComponentAtNode(document.getElementById('panel'));
    }
</script>
</body>
</html>