react jsx 語法 和vue template 語法區別

vue 的template 和react jsx 有什麼區別呢,來整理下。

1:追求理念不一樣

react 認爲現在瀏覽器追求的js css html 這三種文件分工協作的方式效率低下,他認爲js css html 應該是一個整體,而不是像現在這樣分的這麼清楚,協作的時候造成了很多麻煩,所以他們推薦一個組件的所有代碼都寫在一個jsx當中,這樣更有利於組件化開發。
 jsx 本身也是js的一種擴展,可以完全寫js 沒問題,基本上一個有狀態的組件就是一個類。在一個固定的render方法裏返回標籤,標籤和數據邏輯全都耦合在一個類裏面。

react jsx 語法 和vue template 語法區別

甚至樣式也寫在裏面

react jsx 語法 和vue template 語法區別

而 vue 漸進性框架 就分的比較清楚了

react jsx 語法 和vue template 語法區別

模板是template js 呢還是用script包裹起來,和傳統的用法沒有太大區別,利於新手接收一些。

2 :修改數據方式

vue 修改data數據 可以直接 this.data="xxx";而react 還需要setState({data:"xxx"})方法

3 綁定方法
react 由於this 不能綁定到實例對象,所以綁定的時候還需要在標籤裏或者構造函數裏面綁定 this.event=this.evnet.bind(this); 或者 onClick={()=>{this.event()}}
而vue 可以直接寫方法名,要簡單不少,但利用箭頭函數也可以直接綁定this也算差不多了吧

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章