import React,{Component,Fragment} from 'react';
import Child from './Child';

class Counter extends Component{
    constructor(props){
        super(props);
        this.handleBtnClick=this.handleBtnClick.bind(this);
        this.state={
            counter:1
        }
    }

    handleBtnClick(){
        const newCounter=this.state.counter+2;
        this.setState({
            counter:newCounter
        })
    }

    render(){
        console.log('render');
        //当组件初次被创建的时候,render函数会被执行一次;
        //当state,props数据发生变更的时候,render函数会被重新执行

        return(
            <Fragment>
                <button onClick={this.handleBtnClick}>点击,数字+2</button>
            <Child number={this.state.counter}/>
            </Fragment>
        )
    }
}

export default Counter;

import React,{Component,Fragment} from 'react';

class Child extends Component {

    render(){
        return(
            <Fragment>
                <div>{this.props.number}</div>
            </Fragment>
        )
    }
}

export default Child;