摘要：發明了，利用語法來創建虛擬。然而，對持久化實例的缺乏也意味著函數式組件不會出現在的組件樹里。這個很有用，當你在父組件給子組件綁定事件時就需要這個了。之前考慮過用動態組件來切換，但是放棄了，因為沒有直觀啊。另外推薦大家多用函數式組件提高性能。

JSX就是Javascript和XML結合的一種格式。React發明了JSX，利用HTML語法來創建虛擬DOM。當遇到<，JSX就當HTML解析，遇到{就當JavaScript解析.

想折騰一下唄,開玩笑.最開始是因為近期在學習react,在里面體驗了一把jsx語法,發現也并沒有別人說的很難受的感覺啊,于是就想嘗試在vue中也試下,廢話不多說,先來用代碼來看下兩者的區別吧.

ps:vue中大部分場景是不需要用render函數的,還是用模板更簡潔直觀.
 ## 使用template

// item.vue

item組件中就是接收父組件傳過來的id值來顯示不同的h標簽,v-if可以說用到了"極致",而且寫了很多個冗余的slot

## 使用render函數和jsx

// item.vue

再加上父組件來控制props的值。父組件不做對比還用傳統的template格式，

// list.vue

運行后頁面就渲染出了h1 or h2 or h3標簽，同時slot也只有一個，點擊切換props的值，也會顯示不同的h標簽。第二種寫法雖然不是很直接，但是省去了很多冗余代碼，頁面一下清爽了很多。
## 沒了v-if,v-for,v-model怎么辦？
不要著急，這些指令只是黑魔法，用js很容易實現。

v-if

  render(){
       return (
         

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

寫三元表達式只能寫簡單的，那么復雜的還得用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中｛｝中間是沒辦法寫if/for語句的只能寫表達式，所以就用map來當循環，用三元表達式來當判斷了

v-model

最近在幫公司面試招人發現v-model很多人都不知道語法糖是什么？然后有些人說我可以用原生js實現，但是他們竟然不知道在vue中怎么實現，好吧，兩個點：傳值和監聽事件改變值。

很簡單，只需要導入進來，不用再在components屬性聲明了，直接寫在jsx中比如

來看下面的寫法

render (h) {
  return (
    

    
  )
}

上面有個地方需要注意，當給自定義組件綁定事件時用nativeOnClick,而模板格式是用
@click.native ，另外當用到給函數式組件綁定事件時就有點小坑了下面說。

函數式組件無狀態，無this實例，下面是vue文檔中提到的一段話：

因為函數式組件只是一個函數，所以渲染開銷也低很多。然而，對持久化實例的缺乏也意味著函數式組件不會出現在 Vue devtools 的組件樹里。

我個人理解因為沒了狀態(data)，少了很多響應式的處理，還有生命周期等過程會提高速度和減少內存占用吧？

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