首頁 > web前端 > js教程 > react中JSX是什麼

react中JSX是什麼

藏色散人
發布: 2023-01-04 09:37:25
原創
2712 人瀏覽過

react JSX是一種JavaScript的語法擴展,運用於React架構中,其格式比較像是模版語言,但事實上完全是在JavaScript內部實現的;JSX為react.js開發的一套語法糖,也是react.js的使用基礎。

react中JSX是什麼

本文操作環境:windows10系統、react 16、thinkpad t480電腦。

推薦:《react影片教學

react中JSX是什麼?

JSX即JavaScript XML,是Javascript和XML結合的一種格式。

JSX是一種JavaScript的語法擴展,運用於React架構中,其格式比較像是模版語言,但事實上完全是在JavaScript內部實現的。元素是構成React應用的最小單位,JSX就是用來宣告React當中的元素,React使用JSX來描述使用者介面。

JSX為react.js開發的一套語法糖,也是react.js的使用基礎。 React在不使用JSX的情況下一樣可以工作,然而使用JSX可以提高組件的可讀性,因此推薦使用JSX。

這個是官網:http://facebook.github.io/jsx/

#JSX的特點

##可以將HTML語言直接寫在JavaScript語言之中,不加任何引號,這就是JSX的語法,它允許HTML與JavaScript的混寫。

JSX允許直接在模板中插入JavaScript變數。如果這個變數是一個數組,則會展開這個數組的所有成員。

防注入攻擊

在JSX中嵌入使用者輸入是安全的;

React DOM在渲染之前預設會過濾所有傳入的值。它可以確保應用程式不會被注入攻擊。所有的內容在渲染之前都被轉換成了字串。這樣可以有效地防止XSS(跨站腳本攻擊)

Babel轉譯器會把JSX轉換成一個名為React.createElement()的方法呼叫。

如果在普通的html裡面要寫jsx語法,要將script的type改成text/jsx,這是因為React獨有的JSX語法跟JavaScript不相容。凡是使用JSX的地方,都要加上type=「text/jsx」。其次,React提供兩個函式庫:react.js和JSXTransformer.js,它們必須先載入。其中,JSXTransformer.js的作用是將JSX語法轉為JavaScript語法。這一步很消耗時間,實際上線的時候,應該把它放到伺服器完成。

以上是react中JSX是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板