一.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>;}