1 JSX本质

• React.createElement 即h函数，返回vnode
  • createElement 与 cloneElement 的区别是什么
    • createElement函数是JSX编译之后使用的创建React Element的函数
    • 而cloneElement则是用于复制某个元素并传入新的Props
• 第一个参数，可能是组件，也可能是html tag
• 组件名，首字母必须是大写（React规定）

    React.createElement(
      type,
      [props],
      [...children]
    )
    // - 第一个参数是必填，传入的是似HTML标签名称，eg: ul, li
    // - 第二个参数是选填，表示的是属性，eg: className
    // - 第三个参数是选填, 子节点，eg: 要显示的文本内容

    // React.createElement写法
    React.createElement('tag', null, [child1,child2])
    React.createElement('tag', props, child1,child2,child3)
    React.createElement(Comp, props, child1,child2,'文本节点')

    // jsx基本用法
    <div className="container">
      <p>tet</p>
      <img src={imgSrc} />
    </div>
    
    // 编译后 https://babeljs.io/repl
    React.createElement(
      "div",
      {
        className: "container"
      },
      React.createElement("p", null, "tet"),
      React.createElement("img", {
        src: imgSrc
      })
    );

    // jsx style
    const styleData = {fontSize:'20px',color:'#f00'}
    const styleElem = <p style={styleData}>设置style</p>
    
    // 编译后
    const styleData = {
      fontSize: "20px",
      color: "#f00"
    };
    const styleElem = React.createElement(
      "p",
      {
        style: styleData
      },
      "\u8BBE\u7F6Estyle"
    );

    // jsx加载组件
    const app = <div>
        <Input submitTitle={onSubmitTitle} />
        <List list={list} />
    </div>
    
    // 编译后
    const app = React.createElement(
      "div",
      null,
      React.createElement(Input, {
        submitTitle: onSubmitTitle
      }),
      React.createElement(List, {
        list: list
      })
    );

    // jsx事件
    const eventList = <p onClick={this.clickHandler}>text</p>
    
    // 编译后
    const eventList = React.createElement(
      "p",
      {
        onClick: (void 0).clickHandler
      },
      "text"
    );

    // jsx列表
    const listElem = <ul>
    {
      this.state.list.map((item,index)=>{
        return <li key={index}>index:{index},title:{item.title}</li>
      })
     }
    </ul>
    
    // 编译后
    
    const listElem = React.createElement(
      "ul",
      null,
      (void 0).state.list.map((item, index) => {
        return React.createElement(
          "li",
          {
            key: index
          },
          "index:",
          index,
          ",title:",
          item.title
        );
      })
    );