作者：ManStruggling

什麼是 JSX？

JSX是一種JavaScript和XML的結合，即JavaScript + XML = JSX，JSX源於Facebook，可以在JavaScript裡寫XML，因為這個特性，所以具備了JavaScript的靈活性，同時又兼具html的語義化和直觀性

為什麼使用 JSX？

jsx對比createElement函式可讀性更強； VS this。$createElement（‘div’， {。。。}， ［。。。］）

vue-cli3。0及以上預設支援jsx語法

jsx可以使vue元件更容易匯入和管理

首先來橫向對比一下模板語法、createElement函式、jsx三種渲染方式

栗子一

template模板語法

使用最多，不做解釋

createElement

createElement函式實際上建立的是Virtual Node，建立VNode樹，一旦Dom樹的結構複雜，dom節點屬性太多，勢必會造成可讀性差的問題。。。

JSX

然後jsx就閃亮登場

可能有的同學覺得，就這，跟template沒什麼區別呀。

這個案例只涉及到html沒有涉及javascript，jsx是把javascript和html放在一起來書寫的。所以看下個栗子

栗子二

根據type的值進行條件渲染，A、B、C三個模組，每個模組有自己的對應模組的程式碼，也有一些公共的模組，假設這些程式碼有很多行，勢必會造成閱讀性的降低。有人可能覺得如果這樣的話，把公共程式碼抽離出一個單獨的元件不就好了，這樣使可以解決問題，如果這裡的公共程式碼僅僅只在這一個檔案內使用，別的檔案不會對這些公共程式碼做引用呢，要不要考慮抽離公共元件的必要性呢，jsx就可以完美的解決這些問題。

template

在template

createElement

這裡就不做createElement函式的說明了，想必也沒有多少人用這個吧。。。。有的話，那你贏了

JSX

template模板程式碼超過三百行，就很難閱讀了，會重複在VM、V層切換，所以在複雜的大型專案中建議用jsx來做render，提高程式碼的可閱讀性

Usage

插槽和作用域插槽

元件直接引入使用，無需components註冊，方便匯入和管理

上述總結使用jsx的一些特殊情況，條件渲染、v-html、列表的渲染、事件的繫結、屬性繫結、指令的使用、插槽和作用域插槽，聰明的你肯定可以看出來，使用jsx能像vue3的composition API一樣把相同的邏輯程式碼聚合在一起，避免大型專案開發時，頁面邏輯複雜導致程式碼量上升，option API在template和methods之間來回切換的問題。

第一次撰文，如有疑問，歡迎各位大佬斧正，希望大家能夠STAR支援一下小編，希望小編的內容對大家有所幫助~