image.png

有些同學(xué)可能會問，為什么不直接從 JSX 直接渲染構(gòu)造 DOM 結(jié)構(gòu)，而是要經(jīng)過中間這么一層呢？

第一個原因是，當(dāng)我們拿到一個表示 UI 的結(jié)構(gòu)和信息的對象以后，不一定會把元素渲染到瀏覽器的普通頁面上，我們有可能把這個結(jié)構(gòu)渲染到 canvas 上，或者是手機(jī) App 上。所以這也是為什么會要把 react-dom 單獨抽離出來的原因，可以想象有一個叫 react-canvas 可以幫我們把 UI 渲染到 canvas 上，或者是有一個叫 react-app 可以幫我們把它轉(zhuǎn)換成原生的 App（實際上這玩意叫 ReactNative）。

第二個原因是，有了這樣一個對象。當(dāng)數(shù)據(jù)變化，需要更新組件的時候，就可以用比較快的算法操作這個 JavaScript 對象，而不用直接操作頁面上的 DOM，這樣可以盡量少的減少瀏覽器重排，極大地優(yōu)化性能。這個在以后的章節(jié)中我們會提到。

總結(jié)：
JSX 是 JavaScript 語言的一種語法擴(kuò)展，長得像 HTML，但并不是 HTML。
React.js 可以用 JSX 來描述你的組件長什么樣的。
JSX 在編譯的時候會變成相應(yīng)的 JavaScript 對象描述。
react-dom 負(fù)責(zé)把這個用來描述 UI 信息的 JavaScript 對象變成 DOM 元素，并且渲染到頁面上