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