react API学习整理

基础知识

1、jsx 转换 javascript

对于每一个 jsx 标签，babel 插件都会转换成 js 代码，例如：
如下标签结构，

    <div id="div_1" key="key1">
      <div class="div_2">dom转换测试</div>
    </div>

转换后的结构是：

    React.createElement(
      "div",
      {id: "div_1", key: "key1"},
      React.createElement(
         "div",
          {class: "div_2"},
         "dom转换测试"
      )
    )

对于自定义的组件，必须定义成大驼峰格式，createElement 第一个参数会将定义的组件当做变量来引入，例如：

    function ItemList(){
        return <div>item</div>;
    }

    <ItemList key="item">
        <span>asdf</span>
    </ItemList>

转换之后的结果：

    function ItemList() {
      return  React.createElement("div", null, "item");
    }

    React.createElement(
      ItemList, 
      { key: "item" }, 
      React.createElement("span", null, "asdf")
    );

对比将自定义组件些微小写的效果，

    function itemList(){
        return <div>item</div>;
    }

    <itemList key="item">
        <span>asdf</span>
    </itemList>

转换后的结果：

    function itemList() {
      return /*#__PURE__*/React.createElement("div", null, "item");
    }

  React.createElement(
    "itemList", 
    {  key: "item" }, 
    React.createElement("span", null, "asdf")
  );

可以看到，转换后的 ItemList 是作为变量传入 createElement 方法内，而 div、span等标签会作为一个字符串常量传入 createElement 方法，当将自定义组件名改为小写时，也是作为字符串常量传入 API 内，在react中，如果是字符串常量，会被认为是原生的 dom 节点，在运行时会报错。

推荐转换测试工具 babel

持续更新......