react入坑（一）点击按钮加减

// import React from 'react';
// import ReactDOM from 'react-dom';
// import './index.css';
// import App from './App';
// import * as serviceWorker from './serviceWorker';

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

// // If you want your app to work offline and load faster, you can change
// // unregister() to register() below. Note this comes with some pitfalls.
// // Learn more about service workers: https://bit.ly/CRA-PWA
// serviceWorker.unregister();


import React from 'react';
import ReactDOM from 'react-dom';

// ReactDOM.render方法有两个参数，第一个是要渲染页面的结构或者是React元素
// 第二个参数是要把这个元素渲染到真实网页DOM的什么位置

/** React的作用主要是以下几点（非专业）；
 * 1.使用数据驱动界面更新
 * 2.使用单项变化的数据来让BUG更好调试
 * 3.更方便、更生命是的编写Web组件*/
/**
 * 那么这先了解这个三个东西 state props setState方法 */ 

 class Counter extends React.Component {
       /**
     * (1)'this.state'里面有一个属性叫'count',这个属性能够通过'this.setState'
     * 方法重新传入一个对象来赋值。赋值的同事'reder()'方法中'this.state.count'
     * 也会跟随自动变化,最后体现到网页上。这就是'state'属性的作用;
     */
     state = {
         count:0
     };
     onAdd() {
         /**(2)'this.setState()'接收一个新对象来重新赋值'this.state' */
         this.setState({
             count:this.state.count+1
         });
     };
     onSub() {
         this.setState(prevState=>{
             return {
                 count:prevState.count-1
             };
         });
     };
     render(){
        return (
            <div>
                <button onClick={this.onSub.bind(this)}>-</button>
                <span>{this.state.count}</span>
                <button onClick={this.onAdd.bind(this)}>+</button>
            </div>
        )
     }
    }
    ReactDOM.render(
        <Counter/>,
        // <h1>Hello World!</h1>,
        document.getElementById('root')
    );