一.JSX简介

const element = 
Hello, world!h1>;

JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。

Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。以下两种示例代码完全等效：

const element = (
  <h1 className="greeting">
    Hello, world!
  h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement() 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象:

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

二.模板缺陷

模板的最大特点是扩展难度大，不易扩展。可能会造成逻辑冗余：

 :type="1">哈哈
 :type="2">哈哈
 :type="3">哈哈

Level组件需要对不同的type产生不同的标签

三.函数式组件

函数式组件没有模板，只允许提供render函数

export default {
 render(h) {
  return h("h" + this.type, {}, this.$slots.default);
 },
 props: {
  type: {
   type: Number
  }
 }
};

复杂的逻辑变得非常简单

四.JSX应用

使用jsx会让代码看起来更加简洁、易于读取

export default {
 render(h) {
  const tag = "h" + this.type;
  return <tag>{this.$slots.default}tag>;
 },
 props: {
  type: {
   type: Number
  }
 }
};

五.render方法定制组件

编写List组件，可以根据用户传入的数据自动循环列表

 :data="data">

通过render方法来定制组件，在父组件中传入render方法

 :data="data" :render="render">
render(h, name) {
   return {name};
}

我们需要createElement方法，就会想到可以编写个函数组件，将createElement方法传递出来

ListItem.vue调用最外层的render方法，将createElement和当前项传递出来

六.scope-slot

使用v-slot 将内部值传入即可

 :arr="arr">
     v-slot="{item}">
        {{item}}
    

 v-for="(item,key) in arr" :key="key">
     :item="item">