11React中单向数据操作之静态数据显示

1:新建一个Child3.js 并且引入到App.js中

Child3中写入代码

import React, { Component } from 'react'

export default class Child3 extends Component {
    constructor(props){
        super(props);//用来接收参数
        this.state={
            num:10
        }
        console.log("更新属性");
    }
    add=(n)=>{
       this.state.num +=n; 
       this.forceUpdate();

    }
    reduce=(n)=>{
        this.setState({
            num:this.state.num-n
        })
    }
    render() {
        console.log("重新渲染页面");
        return (
            <div>
                <button onClick={()=>{
                        this.add(2);
                }}>加法</button>
                <span>{this.state.num}</span>
                <button onClick={()=>{
                        this.reduce(3)
                }}>减法</button>
            </div>
        )
    }
}

代码注释详解  下面三张图 分别是数据    页面操作  方法声明