[React] 10.React - Props, State与render函数

要做的功能，点击增加按钮，数字加1
在这里插入图片描述

新建一个counter.js的文件，代码如下：

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

class Counter extends Component {
    render() {
        return (
            <Fragment>
                <button>增加</button>
                <div>1</div>
            </Fragment>
        )
    }
}

export default Counter

index.js中的代码做如下改动：

import React from 'react';
import ReactDom from 'react-dom';
import Counter from './counter'

// 将内容挂在到页面上
ReactDom.render(<Counter />, document.getElementById('root'))

在counter.js中定义一个数据，代码如下：

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

class Counter extends Component {

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

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

    render() {
        console.log('render')
        // 当组件初次创建的时候，rendere函数会被执行一次
        // 当state数据发生变更的时候，render函数会被重新执行
        return (
            <Fragment>
                <button onClick={this.handleBtnClick}>增加</button>
                <div>{this.state.counter}</div>
            </Fragment>
        )
    }
}

export default Counter

创建一个子组件：child.js，将数字放在子组件里显示

import React, {Component} from "react";

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

export default Child;

更改父组件 counter.js，使其调用子组件中的数字

render() {
        console.log('render')
        // 当组件初次创建的时候，rendere函数会被执行一次
        // 当state数据发生变更的时候，render函数会被重新执行
        return (
            <Fragment>
                <button onClick={this.handleBtnClick}>增加</button>
                <Child number={this.state.counter}/>
            </Fragment>
        )
    }

counter.js完整代码：

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 + 1
        this.setState({
            counter: newCounter
        });
    }

    render() {
        console.log('render')
        // 当组件初次创建的时候，rendere函数会被执行一次
        // 当state数据发生变更的时候，render函数会被重新执行
        // 当props数据发生变更的时候，render函数会被重新执行
        return (
            <Fragment>
                <button onClick={this.handleBtnClick}>增加</button>
                <Child number={this.state.counter}/>
            </Fragment>
        )
    }
}

export default Counter

child.js中的代码：

import React, {Component} from "react";

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

export default Child;