React中的Props, State 与 render 函数

React 的核心特性总结

1、React：声明式开发

(JS或者jQuery属性命令式开发）

2、可以与其他框架并存

3、组件化

4、单向数据流

（父组件可以直接改变子组件的数据，但是子组件不能直接改变父组件的数据）

Props, State 与 render 函数

render函数什么时候执行：

1、组件初次创建的时候，会执行一次

2、当state数据发生变更时，会再次执行

3、当props数据发生变更时，会再次执行

src/Counter.js

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

class Counter extends Component{
    constructor(props){
        super(props);
        this.addCount=this.addCount.bind(this);

        this.state={
            counter:1
        }
    }

    addCount(){
        this.setState({
            counter:this.state.counter+1
        })
    }

    render(){
        return(
            <Fragment>
                <button onClick={this.addCount}>点击</button>
                <div>{this.state.counter}</div>
            </Fragment>
        )
    }
}

export default Counter;

父子组件写法

新增子组件Child.js

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

class Child extends Component{
    render(){
        return(
            <Fragment>
                <div>{this.props.num}</div>
            </Fragment>
        )
    }
}

export default Child;

修改父组件 Counter.js

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

class Counter extends Component{
    constructor(props){
        super(props);
        this.addCount=this.addCount.bind(this);

        this.state={
            counter:1
        }
    }

    addCount(){
        this.setState({
            counter:this.state.counter+1
        })
    }

    render(){
        return(
            <Fragment>
                <button onClick={this.addCount}>点击</button>
                <Child num={this.state.counter}/>
            </Fragment>
        )
    }
}

export default Counter;

实现效果跟刚才一致