摘要：上面的代碼小書(shū)經(jīng)過(guò)編譯以后會(huì)變成小書(shū)會(huì)構(gòu)建一個(gè)對(duì)象里描述你結(jié)構(gòu)的信息，包括標(biāo)簽名屬性還有子元素等。第二個(gè)原因是，有了這樣一個(gè)對(duì)象。負(fù)責(zé)把這個(gè)用來(lái)描述信息的對(duì)象變成元素，并且渲染到面上。下一節(jié)中我們將介紹小書(shū)組件的方法。

本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson6

轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息

在線閱讀：http://huziketang.com/books/react

這一節(jié)我們通過(guò)一個(gè)簡(jiǎn)單的例子講解 React.js 描述頁(yè)面 UI 的方式。把 src/index.js 中的代碼改成：

import React, { Component } from "react"
import ReactDOM from "react-dom"
import "./index.css"

class Header extends Component {
  render () {
    return (
      

        
React 小書(shū)
      
    )
  }
}

ReactDOM.render(
  
,
  document.getElementById("root")
)

我們?cè)谖募^部從 react 的包當(dāng)中引入了 React 和 React.js 的組件父類(lèi) Component。記住，只要你要寫(xiě) React.js 組件，那么就必須要引入這兩個(gè)東西。

ReactDOM 可以幫助我們把 React 組件渲染到頁(yè)面上去，沒(méi)有其它的作用了。你可以發(fā)現(xiàn)它是從 react-dom 中引入的，而不是從 react 引入。有些朋友可能會(huì)疑惑，為什么不把這些東西都包含在 react 包當(dāng)中呢？我們稍后會(huì)回答這個(gè)問(wèn)題。

接下來(lái)的代碼你看起來(lái)會(huì)比較熟悉，但又會(huì)有點(diǎn)陌生。你看其實(shí)它跟我們前幾節(jié)里面講的內(nèi)容其實(shí)很類(lèi)似，一個(gè)組件繼承 Component 類(lèi)，有一個(gè) render 方法，并且把這個(gè)組件的 HTML 結(jié)構(gòu)返回；這里 return 的東西就比較奇怪了，它并不是一個(gè)字符串，看起來(lái)像是純 HTML 代碼寫(xiě)在 JavaScript 代碼里面。你也許會(huì)說(shuō)，這不就有語(yǔ)法錯(cuò)誤了么？這完全不是合法的 JavaScript 代碼。這種看起來(lái)“在 JavaScript 寫(xiě)的標(biāo)簽的”語(yǔ)法叫 JSX。

為了讓大家深刻理解 JSX 的含義。有必要簡(jiǎn)單介紹了一下 JSX 稍微底層的運(yùn)作原理，這樣大家可以更加深刻理解 JSX 到底是什么東西，為什么要有這種語(yǔ)法，它是經(jīng)過(guò)怎么樣的轉(zhuǎn)化變成頁(yè)面的元素的。

思考一個(gè)問(wèn)題：如何用 JavaScript 對(duì)象來(lái)表現(xiàn)一個(gè) DOM 元素的結(jié)構(gòu)，舉個(gè)例子：

  
Hello
  Click

每個(gè) DOM 元素的結(jié)構(gòu)都可以用 JavaScript 的對(duì)象來(lái)表示。你會(huì)發(fā)現(xiàn)一個(gè) DOM 元素包含的信息其實(shí)只有三個(gè)：標(biāo)簽名，屬性，子元素。

所以其實(shí)上面這個(gè) HTML 所有的信息我們都可以用合法的 JavaScript 對(duì)象來(lái)表示：

{
  tag: "div",
  attrs: { className: "box", id: "content"},
  children: [
    {
      tag: "div",
      arrts: { className: "title" },
      children: ["Hello"]
    },
    {
      tag: "button",
      attrs: null,
      children: ["Click"]
    }
  ]
}

你會(huì)發(fā)現(xiàn)，HTML 的信息和 JavaScript 所包含的結(jié)構(gòu)和信息其實(shí)是一樣的，我們可以用 JavaScript 對(duì)象來(lái)描述所有能用 HTML 表示的 UI 信息。但是用 JavaScript 寫(xiě)起來(lái)太長(zhǎng)了，結(jié)構(gòu)看起來(lái)又不清晰，用 HTML 的方式寫(xiě)起來(lái)就方便很多了。

于是 React.js 就把 JavaScript 的語(yǔ)法擴(kuò)展了一下，讓 JavaScript 語(yǔ)言能夠支持這種直接在 JavaScript 代碼里面編寫(xiě)類(lèi)似 HTML 標(biāo)簽結(jié)構(gòu)的語(yǔ)法，這樣寫(xiě)起來(lái)就方便很多了。編譯的過(guò)程會(huì)把類(lèi)似 HTML 的 JSX 結(jié)構(gòu)轉(zhuǎn)換成 JavaScript 的對(duì)象結(jié)構(gòu)。

上面的代碼：

import React, { Component } from "react"
import ReactDOM from "react-dom"
import "./index.css"

class Header extends Component {
  render () {
    return (
      

        
React 小書(shū)
      
    )
  }
}

ReactDOM.render(
  
,
  document.getElementById("root")
)

經(jīng)過(guò)編譯以后會(huì)變成：

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 小書(shū)"
        )
      )
    )
  }
}

ReactDOM.render(
  React.createElement(Header, null), 
  document.getElementById("root")
);

React.createElement 會(huì)構(gòu)建一個(gè)對(duì)象里描述你 HTML 結(jié)構(gòu)的信息，包括標(biāo)簽名、屬性、還有子元素等。這樣的代碼就是合法的 JavaScript 代碼了。所以使用 React 和 JSX 的時(shí)候一定要經(jīng)過(guò)編譯的過(guò)程。

這里再重復(fù)一遍：所謂的 JSX 其實(shí)就是 JavaScript 對(duì)象。每當(dāng)在 JavaScript 代碼中看到這種 JSX 結(jié)構(gòu)的時(shí)候，腦子里面就可以自動(dòng)做轉(zhuǎn)化，這樣對(duì)你理解 React.js 的組件寫(xiě)法很有好處。

有了這個(gè)表示 HTML 結(jié)構(gòu)和信息的對(duì)象以后，就可以拿去構(gòu)造真正的 DOM 元素，然后把這個(gè) DOM 元素塞到頁(yè)面上。這也是我們最后一段代碼中 ReactDOM.render 所干的事情：

ReactDOM.render(
  
,
  document.getElementById("root")
)

ReactDOM.render 功能就是把組件渲染并且構(gòu)造 DOM 樹(shù)，然后插入到頁(yè)面上某個(gè)特定的元素上（在這里是 id 為 root 的 div 元素）。

所以可以總結(jié)一下從 JSX 到頁(yè)面到底經(jīng)過(guò)了什么樣的過(guò)程：

有些同學(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 多帶帶抽離出來(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ì)提到。

要記住幾個(gè)點(diǎn)：

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 元素，并且渲染到面上。

下一節(jié)中我們將介紹《React.js 小書(shū) Lesson7 - 組件的 render 方法》。