console 命令行工具 X clear

console

class Button extends React.Component {
    constructor(props) {
        super(props);
        this.state = { data: 0 };
        this.setNewNumber = this.setNewNumber.bind(this);
    }

    setNewNumber() {
        this.setState({ data: this.state.data + 1 })
    }
    render() {
        return (
            <div>
                <button onClick={this.setNewNumber}>INCREMENT</button>
                <Content myNumber={this.state.data}></Content>
            </div>
        );
    }
}


class Content extends React.Component {
    componentWillMount() {
        //console.log('Component WILL MOUNT!')
    }
    componentDidMount() {
        //console.log('Component DID MOUNT!')
    }
    componentWillReceiveProps(newProps) {
        //console.log('Component WILL RECEIVE PROPS!')
    }
    shouldComponentUpdate(newProps, newState) {
        return true;
    }
    componentWillUpdate(nextProps, nextState) {
        //console.log('Component WILL UPDATE!');
    }
    componentDidUpdate(prevProps, prevState) {
        //console.log('Component DID UPDATE!')
    }
    componentWillUnmount() {
        //console.log('Component WILL UNMOUNT!')
    }

    render() {
        return (
            <div>
                <h3>{this.props.myNumber}</h3>
            </div>
        );
    }
}

class App extends React.Component {
    render() {
        return (
            <div className='app'>
                <Button />
            </div>
        );
    }
}

ReactDOM.render(
    <App/>,
    document.getElementById('example')
);

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js">
	</script>
	<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js">
	</script>
	<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js">
	</script>
	<title>Document</title>
</head>

<body>
	<div id="example"></div>
</body>

</html>

.app {
    width: 300px;
    height: 300px;
    background: #f2f200;
}