摘要：發(fā)明了，利用語(yǔ)法來(lái)創(chuàng)建虛擬。然而，對(duì)持久化實(shí)例的缺乏也意味著函數(shù)式組件不會(huì)出現(xiàn)在的組件樹(shù)里。這個(gè)很有用，當(dāng)你在父組件給子組件綁定事件時(shí)就需要這個(gè)了。之前考慮過(guò)用動(dòng)態(tài)組件來(lái)切換，但是放棄了，因?yàn)闆](méi)有直觀(guān)啊。另外推薦大家多用函數(shù)式組件提高性能。

JSX就是Javascript和XML結(jié)合的一種格式。React發(fā)明了JSX，利用HTML語(yǔ)法來(lái)創(chuàng)建虛擬DOM。當(dāng)遇到<，JSX就當(dāng)HTML解析，遇到{就當(dāng)JavaScript解析.

想折騰一下唄,開(kāi)玩笑.最開(kāi)始是因?yàn)榻谠趯W(xué)習(xí)react,在里面體驗(yàn)了一把jsx語(yǔ)法,發(fā)現(xiàn)也并沒(méi)有別人說(shuō)的很難受的感覺(jué)啊,于是就想嘗試在vue中也試下,廢話(huà)不多說(shuō),先來(lái)用代碼來(lái)看下兩者的區(qū)別吧.

ps:vue中大部分場(chǎng)景是不需要用render函數(shù)的,還是用模板更簡(jiǎn)潔直觀(guān).
 ## 使用template

// item.vue

item組件中就是接收父組件傳過(guò)來(lái)的id值來(lái)顯示不同的h標(biāo)簽,v-if可以說(shuō)用到了"極致",而且寫(xiě)了很多個(gè)冗余的slot

## 使用render函數(shù)和jsx

// item.vue

再加上父組件來(lái)控制props的值。父組件不做對(duì)比還用傳統(tǒng)的template格式，

// list.vue

運(yùn)行后頁(yè)面就渲染出了h1 or h2 or h3標(biāo)簽，同時(shí)slot也只有一個(gè)，點(diǎn)擊切換props的值，也會(huì)顯示不同的h標(biāo)簽。第二種寫(xiě)法雖然不是很直接，但是省去了很多冗余代碼，頁(yè)面一下清爽了很多。
## 沒(méi)了v-if,v-for,v-model怎么辦？
不要著急，這些指令只是黑魔法，用js很容易實(shí)現(xiàn)。

v-if

  render(){
       return (
         

           {this.show?"你帥":"你丑"}
         
       )
     }

寫(xiě)三元表達(dá)式只能寫(xiě)簡(jiǎn)單的，那么復(fù)雜的還得用if/else

   render(){
        let ifText
        if(this.show){
            ifText=
你帥
        }else{
            ifText=
你丑
        }
        return (
          

            {ifText}
          
        )
      }

v-for

     data(){
        return{
          show:false,
          list:[1,2,3,4]
        }
      },
      render(){
        return (
          

            {this.list.map((v)=>{
              return 
{v}
            })}
          
        )
      }

在jsx中｛｝中間是沒(méi)辦法寫(xiě)if/for語(yǔ)句的只能寫(xiě)表達(dá)式，所以就用map來(lái)當(dāng)循環(huán)，用三元表達(dá)式來(lái)當(dāng)判斷了

v-model

最近在幫公司面試招人發(fā)現(xiàn)v-model很多人都不知道語(yǔ)法糖是什么？然后有些人說(shuō)我可以用原生js實(shí)現(xiàn)，但是他們竟然不知道在vue中怎么實(shí)現(xiàn)，好吧，兩個(gè)點(diǎn)：傳值和監(jiān)聽(tīng)事件改變值。

很簡(jiǎn)單，只需要導(dǎo)入進(jìn)來(lái)，不用再在components屬性聲明了，直接寫(xiě)在jsx中比如

來(lái)看下面的寫(xiě)法

render (h) {
  return (
    

    
  )
}

上面有個(gè)地方需要注意，當(dāng)給自定義組件綁定事件時(shí)用nativeOnClick,而模板格式是用
@click.native ，另外當(dāng)用到給函數(shù)式組件綁定事件時(shí)就有點(diǎn)小坑了下面說(shuō)。

函數(shù)式組件無(wú)狀態(tài)，無(wú)this實(shí)例，下面是vue文檔中提到的一段話(huà)：

因?yàn)楹瘮?shù)式組件只是一個(gè)函數(shù)，所以渲染開(kāi)銷(xiāo)也低很多。然而，對(duì)持久化實(shí)例的缺乏也意味著函數(shù)式組件不會(huì)出現(xiàn)在 Vue devtools 的組件樹(shù)里。

我個(gè)人理解因?yàn)闆](méi)了狀態(tài)(data)，少了很多響應(yīng)式的處理，還有生命周期等過(guò)程會(huì)提高速度和減少內(nèi)存占用吧？

函數(shù)式組件也可以在模板格式中用只需要這樣