WebStorm 创建react工程

 

工程名称为reactdemojs

 文件结构如下

 

创建一个父组件和子组件

父组件为

import React from  "react";

import Child from "./Child";

export default class Life  extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            count:0
        };
    }

    handleAdd=() => {
        this.setState(
            {
                count: this.state.count +=1
            }
        )
    }

    render() {
        return <div>
            <p>react生命周期 这里是父组件</p>
            <button onClick={this.handleAdd}>点击一下</button>
            <p>{this.state.count}</p>
            <Child name="Tom" ></Child>
        </div>
    }

}

　　

子组件为Child

import React from  "react";

export default class Child  extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            count : 0
        }
    }

    componentDidMount() {
        console.log("did mount");
    }


    shouldComponentUpdate(nextProps, nextState, nextContext) {
       console.log("should update")
        return true;
    }



    render() {
        return <div>
            <p>这里是子组件</p>
            <p>{this.props.name}</p>
        </div>
    }

}

　　

运行后效果为