React生命周期

import React from 'react';
import ReactDOM from 'react-dom';
class F extends React.Component {
    constructor(props){
        super(props);
        this.state={
            soldier:['虎子','柱子','狗子']
        }
        this.addSoldier=this.addSoldier.bind(this);
        console.log('组件初始化')
    }
    componentWillMount(){
        console.log('组件马上要挂载了')
    }
    componentDidMount(){
        console.log('组件已经挂载了')
    }

    componentWillReceiveProps(nexProps){
        console.log('组件要接收父组件的值了')//父组件的值改变了才会触发的
    }
    shouldComponentUpdate(){
        console.log('判断是不是要更新组件了')
        return true
    }
    componentWillUpdate(){
        console.log('马上要更新组件了')
    }
    componentDidUpdate(){
        console.log('组件更新完毕')
    }
    componentWillUnmount(){
        console.log('组件要卸载了 ')
    }
    addSoldier(){
        this.setState({
            soldier:[...this.state.soldier,'民兵'+Math.random()]
        })
    }
    render(){
        return(
            <ul>
                <li>{this.props.mydata}</li>
                {
                    this.state.soldier.map((arr)=>{
                       return <li key={arr}>{arr}</li>
                    })
                }
                <button onClick={this.addSoldier}>征兵</button>
            </ul>
    )
    }
}

class G extends React.Component{
    constructor(props){
        super(props)
        this.state={
            sonData:'张大彪'
        }
        this.changeG=this.changeG.bind(this);
    }
    changeG(){
        this.setState({
            sonData:'李云龙'
        })
    }
    render(){
        return(
            <div>
                <button onClick={this.changeG}>改变你爷爷</button>
                <F mydata={this.state.sonData} />
            </div>
        )
    }
}
ReactDOM.render(<G />, document.getElementById('root') );