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;

實現效果跟剛纔一致