class定义组件写法

const { Component } = React;      class Counter extends Component {        constructor(props) {          super(props);          this.state = {            count: 1,          };          // 这种绑定this指向的方法是官方推荐写法,          //  组件初始化的时候只会做一次绑定          // this.clickHandle = this.clickHandle.bind(this); // 改变this指向        }        clickHandle() {          console.log(this);          // 如果要改变组件中的状态数据使用setState方法          //  setState是异步的          //    可以设置第二个参数 表示成功之后的回调函数          this.setState(            {              count: this.state.count + 1,            },            function () {              console.log(this.state.count);            }          );        }        render() {          // 直接在render的时候进行this绑定          //   每一次数据或者属性改变之后this指向绑定的操作都会执行          // return (          //   <button onClick={this.clickHandle.bind(this)}>          //     {this.state.count}          //   </button>          // );          console.count("render执行了");          return (            <button onClick={() => this.clickHandle()}>              {this.state.count}            </button>          );        }      }      // 通过extends继承在Component实现一个组件      //  每一个组件都需要有一个render方法      //    此方法返回的是当前组件显示的内容      class App extends Component {        constructor(props) {          super(props);          this.state = {};        }        render() {          return (            <div>              <h1>我是一个组件-{this.props.title}</h1>              <Counter />            </div>          );        }      }

      const { Component } = React;      class Counter extends Component {        constructor(props) {          super(props);          this.state = {            count: 1,          };          this.clickHandle = this.clickHandle.bind(this);        }        clickHandle() {          this.setState({            count: this.state.count + this.props.ss,          });        }        render() {          console.log("组件重新渲染了");          return (            <button onClick={this.clickHandle}>              当前的计数值为:{this.state.count}            </button>          );        }      }      class App extends Component {        constructor(props) {          super(props);          this.state = {            step: 1,            list: [],          };          this.stepChange = this.stepChange.bind(this);        }        componentDidMount() {          console.log("组件挂载完成");          // 这个周期主要用来获取数据          //  调接口取数据          setTimeout(() => {            this.setState({              list: ["小白", "小灰", "大黄", "小鼎"],            });          }, 10000);        }        stepChange(e) {          this.setState({            step: e.currentTarget.value * 1,          });        }        render() {          return (            <div className="app">              <h5>我是一个组件</h5>              <input                onChange={this.stepChange}                defaultValue="1"                type="range"                step="1"                min="1"                max="20"              />              <h3>{this.state.step}</h3>              <Counter ss={this.state.step} />              <ul>                {this.state.list.map((item) => (                  <li key={item}>{item}</li>                ))}              </ul>            </div>          );        }      }