JSX在render函数中的应用
1.JSX简介constelement=
Hello,world!
;JSX可以很好地描述UI应该呈现它应该具有的基本交互形式。JSX可能会让人想起模板语言，但它具有JavaScript的全部功能。Babel会将JSX翻译成一个名为React.createElement()的函数调用。下面两个示例代码是完全等价的：constelement=(
Hello,world!);constelement=React.createElement('h1',{className:'greeting'},'Hello,world!');React.createElement()预先执行一些检查以帮助您编写无错误的代码，但它实际上创建了一个这样的对象：constelement={type:'h1',props:{className:'greeting',children:'Hello，世界！'}};2、模板缺陷模板最大的特点就是难扩展，不易扩展。可能造成逻辑冗余：hahahahahahaLevel组件需要为不同的类型生成不同的标签<插槽>3.函数式组件函数式组件没有模板，只允许render函数exportdefault{render(h){returnh("h"+this.type,{},this.$slots.default);},props:{type:{type:Number}}};复杂的逻辑变得很简单4.JSX应用使用jsx让代码看起来更简洁易读Takeexportdefault{render(h){consttag="h"+this.type;返回{this.$slots.default};},props:{type:{type:Number}}};5.Render方法自定义组件，编写List组件，可以根据用户传入的数据自动循环列表{{item}} 通过render方法自定义组件，在父组件中传递render方法
render(h,name){return{name};}我们需要createElement方法，所以我们觉得可以写一个函数Component，把createElement方法传出去{{item}} 