一.JSX簡介

const element = 
Hello, world!h1>;

JSX 可以很好地描述 UI 應(yīng)該呈現(xiàn)出它應(yīng)有交互的本質(zhì)形式。JSX 可能會使人聯(lián)想到模版語言，但它具有 JavaScript 的全部功能。

Babel 會把 JSX 轉(zhuǎn)譯成一個名為 React.createElement() 函數(shù)調(diào)用。以下兩種示例代碼完全等效：

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

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

React.createElement() 會預(yù)先執(zhí)行一些檢查，以幫助你編寫無錯代碼，但實際上它創(chuàng)建了一個這樣的對象:

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

二.模板缺陷

模板的最大特點是擴(kuò)展難度大，不易擴(kuò)展。可能會造成邏輯冗余：

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

Level組件需要對不同的type產(chǎn)生不同的標(biāo)簽

三.函數(shù)式組件

函數(shù)式組件沒有模板，只允許提供render函數(shù)

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

復(fù)雜的邏輯變得非常簡單

四.JSX應(yīng)用

使用jsx會讓代碼看起來更加簡潔、易于讀取

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

五.render方法定制組件

編寫List組件，可以根據(jù)用戶傳入的數(shù)據(jù)自動循環(huán)列表

 :data="data">

通過render方法來定制組件，在父組件中傳入render方法

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

我們需要createElement方法，就會想到可以編寫個函數(shù)組件，將createElement方法傳遞出來

ListItem.vue調(diào)用最外層的render方法，將createElement和當(dāng)前項傳遞出來

六.scope-slot

使用v-slot 將內(nèi)部值傳入即可

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

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