[React Fundamentals] Component Lifecycle - Mounting Usage

標籤：

The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson you will 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