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

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

class Component extends React.Component {
    // 建構函式
    constructor(props) {
        super(props);
        this.state = {
            data: 'Old State'
        };

        alert('constructor');
        console.log('初始化資料---------constructor---------');
    }

    // 元件將要載入
    componentWillMount() {
        alert('componentWillMount');
        console.log('componentWillMount');
    }

    // 元件載入完成
    componentDidMount() {
        alert('componentDidMount');
        console.log('componentDidMount');
    }

    // 將要接收父元件穿來的props
    componentWillReceiveProps() {
        alert('componentWillReceiveProps');
        console.log('componentWillReceiveProps');
    }

    // 子元件是不是應該更新
    shouldComponentUpdate() {
        alert('shouldComponentUpdate');
        console.log('shouldComponentUpdate');
        // true表示要更新，false表示不要更新
        return true;
        // return false;
    }

    // 元件將要更新
    componentWillUpdate() {
        alert('componentWillUpdate');
        console.log('componentWillUpdate');
    }

    // 元件更新完成
    componentDidUpdate() {
        alert('componentDidUpdate');
        console.log('componentDidUpdate');
    }

    // 處理點選事件
    handleClick() {
        console.log('更新資料---------handleClick---------');
        this.setState({
            data: 'New State'
        });
    }

    // 渲染
    render() {
        alert('render');
        console.log('render');
        return (
            <div>
                <div>App</div>
                <div>Props:{this.props.data}</div>
                <p>
                    <button onClick={() => {
                        this.handleClick()
                    }}>更新元件
                    </button>
                </p>
            </div>
        );
    }
}

class App extends React.Component {
    // 建構函式
    constructor(props) {
        super(props);
        this.state = {
            data: 'Old Props'
        };
        alert('App初始化---------constructor---------');
        console.log('App初始化---------constructor---------');
    }

    // 更新props屬性
    onPropsChange() {
        alert('更新props屬性');
        console.log('更新props屬性');
        this.setState({
            data: 'New Props'
        });
    }

    // 渲染
    render() {
        return (
            <div>
                <Component data={this.state.data}/>
                <p>
                    <button onClick={() => {
                        this.onPropsChange()
                    }}>改變Props
                    </button>
                </p>
            </div>
        )
    }
}

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

點選“改變Props”按鈕後：
1、更新props屬性
2、componentWillReceiveProps
3、shouldComponentUpdate
4、componentWillUpdate
5、render
6、componentDidUpdate