const element = Hello, world!;
JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 Javascript 的全部功能。
Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。
以下两种示例代码完全等效：
const element = (Hello, world! );
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
React.createElement() 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象:
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};
二.模板缺陷
模板的最大特点是扩展难度大，不易扩展。可能会造成逻辑冗余：
哈哈
哈哈
哈哈
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 {this.$slots.default} ;
},
props: {
type: {
type: Number
}
}
};
编写List组件，可以根据用户传入的数据自动循环列表
- {{item}}
通过render方法来定制组件，在父组件中传入render方法
render(h, name) {
return >{name};
}
我们需要createElement方法，就会想到可以编写个函数组件，将createElement方法传递出来
{{item}}
ListItem.vue调用最外层的render方法，将createElement和当前项传递出来
使用v-slot 将内部值传入即可
{{item}}
基于iview使用jsx扩展成可编辑的表格
