import React from "./react";
import ReactDom from "./react-dom";

// const ele = (
//   <div className="active" title="123">
//     hello, <span> react </span>
//   </div>
// );

// // 函数组件
// function Home() {
//   return (
//     <div className="active" title="123">
//       hello,<span>react</span>
//     </div>
//   );
// }
// 类组件
class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      num: 0
    };
  }
  // 组件将要加载
  componentWillMount() {
    console.log("组件将要加载");
  }
  componentWillReveiveProps(props) {
    console.log(props);
  }
  // 组件加载
  componentDidMount() {
    console.log("组件加载完成");
    for (let i = 0; i < 100; i++) {
      this.setState((prevState, prevProps) => {
        console.log(prevState.num);
        return {
          num: prevState.num + 1
        };
      });
      console.log(this.state.num, "num");
    }
  }
  componentWillUpdate() {
    console.log("组件将要更新");
  }
  // 组件将要更新
  componentDidUpdate() {
    console.log("组件更新完成");
  }
  add() {
    // 修改状态的唯一方法调用 setState
    this.setState({
      count: this.state.count + 1
    });
  }
  render() {
    return (
      <div className="active" title="123">
        hello, <span> react </span>
        <span
          style={{
            display: "inline-block",
            margin: "0px 20px"
          }}
        >
          {this.state.count}
        </span>
        <button onClick={this.add.bind(this)}> 点击增加 </button>
      </div>
    );
  }
}
const title = "zk";
// console.log(<Home name={title} />);

// 核心: 组件化开发

// 两个问题:
// 1.为什么ReactDom.render()必须要引入react?
// 1.解答:babel转换为jsx需要react
/**
 var ele = React.createElement("div", {
  className: "active",
  title: "123"
}, "hello,", React.createElement("span", null, "react"));
 */

// 2.组件: 函数组件 类组件
// console.log(ele, "jsx");
// ReactDom.render(ele, document.querySelector("#root"));

ReactDom.render(<Home name={title} />, document.querySelector("#root"));

/**
        createElement(tag,attrs,child1,child2...) 

        var ele = React.createElement("div", {
          className: "active",
          title: "123"
        }, "hello,", React.createElement("span", null, "react"));
         */