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')
    );