React 使用 JSX 來替代常規(guī)的 JavaScript。
JSX 是一個(gè)看起來很像 XML 的 JavaScript 語法擴(kuò)展。
我們不需要一定使用 JSX,但它有以下優(yōu)點(diǎn):
JSX 執(zhí)行更快,因?yàn)樗诰幾g為 JavaScript 代碼后進(jìn)行了優(yōu)化。
它是類型安全的,在編譯過程中就能發(fā)現(xiàn)錯(cuò)誤。
使用 JSX 編寫模板更加簡單快速。
先看下以下代碼:
const element = <h1>Hello, world!</h1>;
這種看起來可能有些奇怪的標(biāo)簽語法既不是字符串也不是 HTML。
它被稱為 JSX, 一種 JavaScript 的語法擴(kuò)展。 我們推薦在 React 中使用 JSX 來描述用戶界面。
JSX 是在 JavaScript 內(nèi)部實(shí)現(xiàn)的。
我們知道元素是構(gòu)成 React 應(yīng)用的最小單位,JSX 就是用來聲明 React 當(dāng)中的元素。
與瀏覽器的 DOM 元素不同,React 當(dāng)中的元素事實(shí)上是普通的對(duì)象,React DOM 可以確保 瀏覽器 DOM 的數(shù)據(jù)內(nèi)容與 React 元素保持一致。
要將 React 元素渲染到根 DOM 節(jié)點(diǎn)中,我們通過把它們都傳遞給 ReactDOM.render() 的方法來將其渲染到頁面上:
React 實(shí)例
var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));
注意:? 由于 JSX 就是 JavaScript,一些標(biāo)識(shí)符像 class 和 for 不建議作為 XML 屬性名。作為替代,React DOM 使用 className 和 htmlFor 來做對(duì)應(yīng)的屬性。