這一節我們通過一個簡單的例子講解 React.js 描述頁面 UI 的方式。愛掏網 - it200.com把 src/index.js 中的代碼改成：
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'
class Header extends Component {
render () {
return (
React 小書
)
}
}
ReactDOM.render(
我們在文件頭部從 react 的包當中引入了 React 和 React.js 的組件父類 Component。愛掏網 - it200.com記住，只要你要寫 React.js 組件，那么就必須要引入這兩個東西。愛掏網 - it200.com
ReactDOM 可以幫助我們把 React 組件渲染到頁面上去，沒有其它的作用了。愛掏網 - it200.com你可以發現它是從 react-dom 中引入的，而不是從 react 引入。愛掏網 - it200.com有些朋友可能會疑惑，為什么不把這些東西都包含在 react 包當中呢？我們稍后會回答這個問題。愛掏網 - it200.com
接下來的代碼你看起來會比較熟悉，但又會有點陌生。愛掏網 - it200.com你看其實它跟我們前幾節里面講的內容其實很類似，一個組件繼承 Component 類，有一個 render 方法，并且把這個組件的 HTML 結構返回；這里 return 的東西就比較奇怪了，它并不是一個字符串，看起來像是純 HTML 代碼寫在 JavaScript 代碼里面。愛掏網 - it200.com你也許會說，這不就有語法錯誤了么？這完全不是合法的 JavaScript 代碼。愛掏網 - it200.com這種看起來“在 JavaScript 寫的標簽的”語法叫 JSX。愛掏網 - it200.com
為了讓大家深刻理解 JSX 的含義。愛掏網 - it200.com有必要簡單介紹了一下 JSX 稍微底層的運作原理，這樣大家可以更加深刻理解 JSX 到底是什么東西，為什么要有這種語法，它是經過怎么樣的轉化變成頁面的元素的。愛掏網 - it200.com
思考一個問題：如何用 JavaScript 對象來表現一個 DOM 元素的結構，舉個例子：
Hello
每個 DOM 元素的結構都可以用 JavaScript 的對象來表示。愛掏網 - it200.com你會發現一個 DOM 元素包含的信息其實只有三個：標簽名，屬性，子元素。愛掏網 - it200.com
所以其實上面這個 HTML 所有的信息我們都可以用合法的 JavaScript 對象來表示：
{
tag: 'div',
attrs: {
className: 'box',
id: 'content'
},
children: [
{
tag: 'div',
arrts: { className: 'title' },
children: ['Hello']
},
{
tag: 'button',
attrs: null,
children: ['Click']
}
]
}
你會發現，HTML 的信息和 JavaScript 所包含的結構和信息其實是一樣的，我們可以用 JavaScript 對象來描述所有能用 HTML 表示的 UI 信息。愛掏網 - it200.com但是用 JavaScript 寫起來太長了，結構看起來又不清晰，用 HTML 的方式寫起來就方便很多了。愛掏網 - it200.com
于是 React.js 就把 JavaScript 的語法擴展了一下，讓 JavaScript 語言能夠支持這種直接在 JavaScript 代碼里面編寫類似 HTML 標簽結構的語法，這樣寫起來就方便很多了。愛掏網 - it200.com編譯的過程會把類似 HTML 的 JSX 結構轉換成 JavaScript 的對象結構。愛掏網 - it200.com
上面的代碼：
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'
class Header extends Component {
render () {
return (
React 小書
)
}
}
ReactDOM.render(
經過編譯以后會變成：
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'
class Header extends Component {
render () {
return (
React.createElement(
"div",
null,
React.createElement(
"h1",
{ className: 'title' },
"React 小書"
)
)
)
}
}
ReactDOM.render(
React.createElement(Header, null),
document.getElementById('root')
);
React.createElement 會構建一個 JavaScript 對象來描述你 HTML 結構的信息，包括標簽名、屬性、還有子元素等。愛掏網 - it200.com這樣的代碼就是合法的 JavaScript 代碼了。愛掏網 - it200.com所以使用 React 和 JSX 的時候一定要經過編譯的過程。愛掏網 - it200.com
這里再重復一遍：所謂的 JSX 其實就是 JavaScript 對象。愛掏網 - it200.com每當在 JavaScript 代碼中看到這種 JSX 結構的時候，腦子里面就可以自動做轉化，這樣對你理解 React.js 的組件寫法很有好處。愛掏網 - it200.com
有了這個表示 HTML 結構和信息的對象以后，就可以拿去構造真正的 DOM 元素，然后把這個 DOM 元素塞到頁面上。愛掏網 - it200.com這也是我們最后一段代碼中 ReactDOM.render 所干的事情：
ReactDOM.render(
ReactDOM.render 功能就是把組件渲染并且構造 DOM 樹，然后插入到頁面上某個特定的元素上（在這里是 id 為 root 的 div 元素）。愛掏網 - it200.com
所以可以總結一下從 JSX 到頁面到底經過了什么樣的過程：
有些同學可能會問，為什么不直接從 JSX 直接渲染構造 DOM 結構，而是要經過中間這么一層呢？
第一個原因是，當我們拿到一個表示 UI 的結構和信息的對象以后，不一定會把元素渲染到瀏覽器的普通頁面上，我們有可能把這個結構渲染到 canvas 上，或者是手機 App 上。愛掏網 - it200.com所以這也是為什么會要把 react-dom 單獨抽離出來的原因，可以想象有一個叫 react-canvas 可以幫我們把 UI 渲染到 canvas 上，或者是有一個叫 react-app 可以幫我們把它轉換成原生的 App（實際上這玩意叫 ReactNative）。愛掏網 - it200.com
第二個原因是，有了這樣一個對象。愛掏網 - it200.com當數據變化，需要更新組件的時候，就可以用比較快的算法操作這個 JavaScript 對象，而不用直接操作頁面上的 DOM，這樣可以盡量少的減少瀏覽器重排，極大地優化性能。愛掏網 - it200.com這個在以后的章節中我們會提到。愛掏網 - it200.com
要記住幾個點：
- JSX 是 JavaScript 語言的一種語法擴展，長得像 HTML，但并不是 HTML。愛掏網 - it200.com
- React.js 可以用 JSX 來描述你的組件長什么樣的。愛掏網 - it200.com
- JSX 在編譯的時候會變成相應的 JavaScript 對象描述。愛掏網 - it200.com
-
react-dom負責把這個用來描述 UI 信息的 JavaScript 對象變成 DOM 元素，并且渲染到頁面上。愛掏網 - it200.com
- 用 React.js 在頁面上渲染標題