React的生命周期

声明一个父组件Life.js代码如下

import React from 'react'
import Child from './Child'//引入子组件
export default class Life extends React.Component{
    constructor(props){ //初始化
       super(props);
       this.state = {
           count:0
       }
    }
    haddleAdd = () =>{
        this.setState({
            count:this.state.count + 1
        });
    }
    haddleClick(){
       this.setState({
           count:this.state.count + 1
       }); 
    }
    render(){
        return <div style={{padding:50}}>
            <p>React生命周期介绍</p>
            <button onClick = {this.haddleAdd}>点击一下</button>
            <button onClick = {this.haddleClick.bind(this)}>点击一下</button>
            <p>{this.state.count}</p>
            <Child name="Jack"></Child>
        </div>
    }
}

 声明一个子组件Child.js代码如下:

import React from 'react'
export default class Child extends React.Component{
    constructor(props){//构造函数中初始化状态
        super(props);
       this.state = {
          count:0
       }
    }
    componentWillMount(){
        console.log('will mount')//componentWillMount 将要装载，在render之前调用
    }
    componentDidMount(){ //（装载完成），在render之后调用
        console.log('did mount')
    }
    componentWillReceiveProps(newProps){
        console.log('will props' + newProps.name)
    }
    shouldComponentUpdate(){
        console.log('should updata');
        return true
    }
    componentWillUpdate(){
        console.log('will update');
    }
    componentDidUpdate(){
        console.log('did update');
    }
    render(){
        return <div>
            <p>这里是子组件测试子组件的生命周期</p>
            <p>{this.props.name}</p>
        </div>
    }
}

运行页面结果如图所示：

 

执行点击事件结果如图所示

 

仅为个人的学习过程，还有很多不足