[React Fundamentals] Component lifecycle-mounting Usage

The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson you'll learn some simple uses for these hooks.

import React from ‘react‘;
import ReactDOM from ‘react-dom‘; class App extends React.Component {
    constructor(){
        super(); this.state = {
            val: 0 }
    }
    update(){ this.setState({val: this.state.val + 1 })
    }
    componentWillMount(){
        console.log(this.state) this.setState({
            val: this.state.val * 2 });
        console.log("Component Will Mount");
    }
    render() {
        console.log("rendering"); return ( <div>
                <button onClick={this.update.bind(this)}>{this.state.val}</button>
            </div> )
    }
    componentDidMount(){ this.inc = setInterval(this.update.bind(this), 500);
        console.log("Component Did Mount");
    }
    componentWillUnmount(){
        clearInterval(this.inc);
        console.log("Component will unmount");
    }
}

export default class Wrapper extends React.Component{
    constructor(){
        super();
    }
    mount(){
        ReactDOM.render(<App />, document.getElementById(‘a‘));
    }
    unmount(){ // Unmount a dom node  ReactDOM.unmountComponentAtNode(document.getElementById(‘a‘))
    }
    render() { return ( <div>
                <button onClick={this.mount.bind(this)}>Mount</button>
                <button onClick={this.unmount.bind(this)}>Unmount</button>
                <div id="a"></div>
            </div> );
    }

}

[React Fundamentals] Component lifecycle-mounting Usage