/**

 * Props,State,与render函数

 */

import React, { Component, Fragment } from "react";

// import Child from "./Child";

class Counter extends Component {

  constructor(props) {

    super(props);

    this.handleBtnClick = this.handleBtnClick.bind(this);

    this.state = {

      counter: 1,

    };

  }

  // 增加

  handleBtnClick() {

    const newCounter = this.state.counter + 1;

    console.log(this.pElem.innerHTML);

    //  setState 是异步的

    //  this.setState({

    //    counter: newCounter,

    //  });

    this.setState(

      () => {

        return {

          counter: newCounter,

        };

      },

      () => {

        console.log(this.pElem.innerHTML);

      }

    );

  }

  render() {

    //  console.log("render");

    //  当组件初次创建的时候，render函数会被执行一次

    //  当state数据发生变更的时候，render函数会被重新执行

    //  当props数据发生变更的时候，render函数会被重新执行

    //  ref写在html标签上，获取的是dom节点

    // ref写在组件标签上，获取的是组件的js实例

    return (

      <Fragment>

        {/*这是注释 JSX语法注释格式 */}

        <button onClick={this.handleBtnClick}>增加</button>

        <p

          ref={(p) => {

            this.pElem = p;

          }}

        >

          {this.state.counter}

        </p>

        {/* <Child

          ref={(child) => {

            this.childElem = child;

          }}

          number={this.state.counter}

        /> */}

      </Fragment>

    );

  }

}

export default Counter;