[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.

 

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

 

"componentWillMount" happen before rendering, "state" and "props" are ready, but DOM is not rendered yet.

"componentDidMount" happen after component rendered to the DOM, can access DOM Node.

 

[React Fundamentals] Component Lifecycle - Mounting Basics