JSX在render函数中的应用详解

一.JSX简介

const element = <h1>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!' }};

二.模板缺陷

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

<Level :type="1">哈哈</Level><Level :type="2">哈哈</Level><Level :type="3">哈哈</Level>

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

<template> <h1 v-if="type==1"> <slot></slot> </h1> <h2 v-else-if="type==2"> <slot></slot> </h2> <h3 v-else-if="type==3"> <slot></slot> </h3></template><script>export default { props: { type: {  type: Number } }};</script>

三.函数式组件

函数式组件没有模板，只允许提供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组件，可以根据用户传入的数据自动循环列表

<List :data="data"></List><script>import List from "./components/List";export default { data() { return {   data: ["苹果", "香蕉", "橘子"]  }; }, components: { List }};</script><!-- List组件渲染列表 --><template> <div class="list"> <ul v-for="(item,index) in data" :key="index">  <li>{{item}}</li> </ul> </div></template><script>export default { props: { data: Array, default: () => [] }};</script>

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

<List :data="data" :render="render"></List>render(h, name) {  return <span>{name}</span>;}