/*
https://reactjs.org/docs/react-component.html


React生命週期函式：

    元件載入之前，元件載入完成，以及元件更新資料，元件銷燬。

    觸發的一系列的方法 ，這就是元件的生命週期函式


元件載入的時候觸發的函式： 

    constructor 、componentWillMount、 render 、componentDidMount

元件資料更新的時候觸發的生命週期函式：

    shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate


你在父元件裡面改變props傳值的時候觸發的：

    componentWillReceiveProps


元件銷燬的時候觸發的：

    componentWillUnmount


必須記住的生命週期函式：


    *載入的時候：componentWillMount、 render 、componentDidMount（dom操作）

    更新的時候：componentWillUpdate、render、componentDidUpdate

    *銷燬的時候： componentWillUnmount




*/


import React, { Component } from 'react';

class Lifecycle extends Component {
    constructor(props) {

        console.log('01建構函式');
        super(props);
        this.state = { 

            msg:'我是一個msg'
         };
    }  

    //元件將要掛載的時候觸發的生命週期函式
    componentWillMount(){

        console.log('02元件將要掛載');
    }
    //元件掛載完成的時候觸發的生命週期函式
    componentDidMount(){

        //dom操作放在這個裡面    請求資料也放在這個裡面

        console.log('04元件將要掛載');
    }


    //是否要更新資料  如果返回true才會執行更新資料的操作
    shouldComponentUpdate(nextProps, nextState){
        console.log('01是否要更新資料');

        console.log(nextProps);

        console.log(nextState);

        return true;
    }

    //將要更新資料的時候觸發

    componentWillUpdate(){
        console.log('02元件將要更新');
    }
    //元件更新完成
    componentDidUpdate(){
        console.log('04元件資料更新完成');
    }

    // 你在父元件裡面改變props傳值的時候觸發的

    componentWillReceiveProps(){

        console.log('父子元件傳值，父元件裡面改變了props的值觸發的方法')
    }

    setMsg=()=>{

        this.setState({

            msg:'我是改變後的msg的資料'
        })
    }

    //元件銷燬的時候觸發的生命週期函式   用在元件銷燬的時候執行操作
    componentWillUnmount(){

            console.log('元件銷燬了');
    }
    render() {
        console.log('03資料渲染render');
       
        return (
            <div>

                生命週期函式演示--- {this.state.msg}-----{this.props.title}

                <br />
                <br />

                <button onClick={this.setMsg}>更新msg的資料</button>
            </div>
        );
    }
}

export default Lifecycle;