lovecoding
/
VIP20


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../react.development.js"></script>
    <script src="../react-dom.development.js"></script>
    <script src="../babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      class Greeting extends React.Component {
        render() {
          return (
            <div>
              <h3>你好，兄弟！</h3>
            </div>
          );
        }
      }

      class Counter extends React.Component {
        // 添加状态
        // 写法-1
        state = {
          name: '计数器',
          count: 0, // 定义一个计数的状态值
        };
        // 写法-2
        // constructor(props) {
        //   super(props); // 在继承关系中，下面代码要使用this 的话 必须先调用super父类的构造器才可以
        //   this.state = {};
        // }
        // 像vue那样 定义实例方法来作为事件监听器
        // 2 修改状态：一定要保证其响应式，那么只能通过 组件实例的setState方法
        reduceOne() {
          // console.log(this);
          // 类Vue，如果直接修改state可以吗？
          // this.state.count--;// wrong
          // 正确做法
          this.setState({
            count: this.state.count - 1,
          });
        }
        addOne = () => {
          // console.log(this);
          this.setState({
            count: this.state.count + 1,
          });
        };

        render() {
          // 1 在类组件中 通过this先拿到组件实例，然后通过访问state属性得到所有的状态。
          return (
            <div>
              <h3>{this.state.name}</h3>
              <p>当前值：{this.state.count}</p>
              <p>
                <button onClick={this.reduceOne.bind(this)}>-</button>
                <button onClick={this.addOne}>+</button>
              </p>
            </div>
          );
        }
      }

      let element = <Counter />; // 将组件 => jsx(React元素)
      ReactDOM.createRoot(document.querySelector('#root')).render(element);
    </script>
  </body>
</html>