有些同學(xué)可能會(huì)問(wèn)，為什么不直接從 JSX 直接渲染構(gòu)造 DOM 結(jié)構(gòu)，而是要經(jīng)過(guò)中間這么一層呢？
第一個(gè)原因是，當(dāng)我們拿到一個(gè)表示 UI 的結(jié)構(gòu)和信息的對(duì)象以后，不一定會(huì)把元素渲染到瀏覽器的普通頁(yè)面上，我們有可能把這個(gè)結(jié)構(gòu)渲染到 canvas 上，或者是手機(jī) App 上。所以這也是為什么會(huì)要把 react-dom 單獨(dú)抽離出來(lái)的原因，可以想象有一個(gè)叫 react-canvas 可以幫我們把 UI 渲染到 canvas 上，或者是有一個(gè)叫 react-app 可以幫我們把它轉(zhuǎn)換成原生的 App（實(shí)際上這玩意叫 ReactNative）。
第二個(gè)原因是，有了這樣一個(gè)對(duì)象。當(dāng)數(shù)據(jù)變化，需要更新組件的時(shí)候，就可以用比較快的算法操作這個(gè) JavaScript 對(duì)象，而不用直接操作頁(yè)面上的 DOM，這樣可以盡量少的減少瀏覽器重排，極大地優(yōu)化性能。這個(gè)在以后的章節(jié)中我們會(huì)提到。
總結(jié)：
JSX 是 JavaScript 語(yǔ)言的一種語(yǔ)法擴(kuò)展，長(zhǎng)得像 HTML，但并不是 HTML。
React.js 可以用 JSX 來(lái)描述你的組件長(zhǎng)什么樣的。
JSX 在編譯的時(shí)候會(huì)變成相應(yīng)的 JavaScript 對(duì)象描述。
react-dom 負(fù)責(zé)把這個(gè)用來(lái)描述 UI 信息的 JavaScript 對(duì)象變成 DOM 元素，并且渲染到頁(yè)面上
