概覽
文章內(nèi)容選自極客時間 ebay 技術(shù)專家王沛的《 React 實戰(zhàn)進階》，本文的主題是 JSX 的本質(zhì)：不是模板引擎，而是語法糖。
小結(jié)
1、JSX 的本質(zhì)
2、如何使用 JSX
3、JSX 的優(yōu)點
內(nèi)容
JSX 的本質(zhì)
JSX：在 JavaScript 中直接使用 HTML 標記，實質(zhì)是：調(diào)用 React 的 createElement API
createElement (標記類型, 屬性：對象類型, 子元素1, 子元素2 ...)
image.png
等價于：
image.png
結(jié)論：利用 JavaScript 原生語法實現(xiàn)動態(tài)創(chuàng)建 UI，不用學習新的模板語言
如何使用JSX
思考：如何在 JSX 中使用 JavaScript 特性 ？
答案：表達式。
1、JSX 本身也是表達式：
image.png
2、在屬性中使用表達式：
image.png
3、延展屬性：
image.png
4、表達式作為子元素：
image.png
對比其它模板語言：不需要學習新語法
image.png
JSX的優(yōu)點
1、直觀：聲明式創(chuàng)建界面的直觀
2、靈活：代碼實現(xiàn)動態(tài)創(chuàng)建界面的靈活
3、學習成本：不需要學習新的模板語言
約定
1、React 認為小寫的 Tag 是原生的 DOM 節(jié)點
2、大寫字母開頭為自定義組件
3、JSX 標記可以直接使用 屬性語法，例如：<menu.Item />
