深入了解React（十一、生命周期1）

import React from 'react';
import ReactDOM from 'react-dom';

import 'font-awesome/css/font-awesome.min.css';
import './index.css';
import './index.scss';

class App extends React.Component {
    // 构造函数
    constructor(props) {
        super(props);
        alert('constructor');
        console.log('constructor');
    }

    // 组件将要加载
    componentWillMount() {
        alert('componentWillMount');
        console.log('componentWillMount');
    }

    // 组件加载完成
    componentDidMount() {
        alert('componentDidMount');
        console.log('componentDidMount');
    }

    // 渲染
    render() {
        alert('render');
        console.log('render');
        return (
            <div>App</div>
        );
    }
}

ReactDOM.render(
    <div>
        {/*<Component></Component>*/}
        <App></App>
    </div>,
    document.getElementById('app')
);

打印顺序：
1、constructor
2、componentWillMount
3、render
4、componentDidMount