React.js 小書 Lesson6 - 使用 JSX 描述 UI 信息

ChanceWong 發布于2019-08-21 17:33 / 1749人閱讀

摘要：上面的代碼小書經過編譯以后會變成小書會構建一個對象里描述你結構的信息，包括標簽名屬性還有子元素等。第二個原因是，有了這樣一個對象。負責把這個用來描述信息的對象變成元素，并且渲染到面上。下一節中我們將介紹小書組件的方法。

React.js 小書 Lesson6 - 使用 JSX 描述 UI 信息

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

轉載請注明出處，保留原文鏈接以及作者信息

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

這一節我們通過一個簡單的例子講解 React.js 描述頁面 UI 的方式。把 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(
  ,
  document.getElementById("root")
)

我們在文件頭部從 react 的包當中引入了 React 和 React.js 的組件父類 Component。記住，只要你要寫 React.js 組件，那么就必須要引入這兩個東西。

ReactDOM 可以幫助我們把 React 組件渲染到頁面上去，沒有其它的作用了。你可以發現它是從 react-dom 中引入的，而不是從 react 引入。有些朋友可能會疑惑，為什么不把這些東西都包含在 react 包當中呢？我們稍后會回答這個問題。

接下來的代碼你看起來會比較熟悉，但又會有點陌生。你看其實它跟我們前幾節里面講的內容其實很類似，一個組件繼承 Component 類，有一個 render 方法，并且把這個組件的 HTML 結構返回；這里 return 的東西就比較奇怪了，它并不是一個字符串，看起來像是純 HTML 代碼寫在 JavaScript 代碼里面。你也許會說，這不就有語法錯誤了么？這完全不是合法的 JavaScript 代碼。這種看起來“在 JavaScript 寫的標簽的”語法叫 JSX。

JSX 原理

為了讓大家深刻理解 JSX 的含義。有必要簡單介紹了一下 JSX 稍微底層的運作原理，這樣大家可以更加深刻理解 JSX 到底是什么東西，為什么要有這種語法，它是經過怎么樣的轉化變成頁面的元素的。

思考一個問題：如何用 JavaScript 對象來表現一個 DOM 元素的結構，舉個例子：


  Hello

每個 DOM 元素的結構都可以用 JavaScript 的對象來表示。你會發現一個 DOM 元素包含的信息其實只有三個：標簽名，屬性，子元素。

所以其實上面這個 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 信息。但是用 JavaScript 寫起來太長了，結構看起來又不清晰，用 HTML 的方式寫起來就方便很多了。

于是 React.js 就把 JavaScript 的語法擴展了一下，讓 JavaScript 語言能夠支持這種直接在 JavaScript 代碼里面編寫類似 HTML 標簽結構的語法，這樣寫起來就方便很多了。編譯的過程會把類似 HTML 的 JSX 結構轉換成 JavaScript 的對象結構。

上面的代碼：

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

class Header extends Component {
  render () {
    return (
      
        React 小書
      
    )
  }
}

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

經過編譯以后會變成：

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 會構建一個對象里描述你 HTML 結構的信息，包括標簽名、屬性、還有子元素等。這樣的代碼就是合法的 JavaScript 代碼了。所以使用 React 和 JSX 的時候一定要經過編譯的過程。

這里再重復一遍：所謂的 JSX 其實就是 JavaScript 對象。每當在 JavaScript 代碼中看到這種 JSX 結構的時候，腦子里面就可以自動做轉化，這樣對你理解 React.js 的組件寫法很有好處。

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

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

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

所以可以總結一下從 JSX 到頁面到底經過了什么樣的過程：

有些同學可能會問，為什么不直接從 JSX 直接渲染構造 DOM 結構，而是要經過中間這么一層呢？

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

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

總結

要記住幾個點：

JSX 是 JavaScript 語言的一種語法擴展，長得像 HTML，但并不是 HTML。

React.js 可以用 JSX 來描述你的組件長什么樣的。

JSX 在編譯的時候會變成相應的 JavaScript 對象描述。

react-dom 負責把這個用來描述 UI 信息的 JavaScript 對象變成 DOM 元素，并且渲染到面上。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/89675.html

React.js 小書 Lesson5 - React.js 基本環境安裝

摘要：工具地址在安裝之前要確認你的機器上安裝了環境包括。安裝好環境以后，只需要按照官網的指引安裝即可。所以可以把的源改成國內的的源，這樣會加速下載過程。接下來我們會探討的組件的基本寫法小書使用描述信息。 React.js 小書 Lesson5 - React.js 基本環境安裝本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson5 ...

zilu 2019-08-21 17:32 評論0 收藏0
寫一本關于 React.js 的小書

摘要：因為工作中一直在使用，也一直以來想總結一下自己關于的一些知識經驗。于是把一些想法慢慢整理書寫下來，做成一本開源免費專業簡單的入門級別的小書，提供給社區。本書的后續可能會做成視頻版本，敬請期待。本作品采用署名禁止演繹國際許可協議進行許可 React.js 小書本文作者：胡子大哈本文原文：React.js 小書轉載請注明出處，保留原文鏈接以及作者信息在線閱讀：http://huzi...

Scorpion 2019-08-21 11:39 評論0 收藏0
2017-09-16 前端日報

摘要：前端日報精選深入理解綁定請使用千位分隔符逗號表示網頁中的大數字跨頁面通信的各種姿勢你所不知道的濾鏡技巧與細節代碼質量管控復雜度檢測中文翻譯基于與的三種代碼分割范式掘金系列如何構建應用程序冷星的前端雜貨鋪第期美團旅行前端技術體系 2017-09-16 前端日報精選深入理解 js this 綁定請使用千位分隔符(逗號)表示web網頁中的大數字跨頁面通信的各種姿勢你所不知道的 CSS 濾...

cheng10 2019-08-22 11:08 評論0 收藏0
React.js 小書 Lesson7 - 組件的 render 方法

摘要：一個組件類必須要實現一個方法，這個方法必須要返回一個元素。你也可以把它改成，它就會顯示小書。注意，直接使用在的元素上添加類名如這種方式是不合法的。現在頁面上是顯示小書。下一節中我們將介紹小書組件的組合嵌套和組件樹。 React.js 小書 Lesson7 - 組件的 render 方法本文作者：胡子大哈本文原文：http://huziketang.com/books/react/l...

Near_Li 2019-08-21 17:33 評論0 收藏0
React.js 小書 Lesson22 - props.children 和容器類組件

摘要：由于會把插入表達式里面數組中的一個個羅列下來顯示。這樣通過這個布局組件，就可以在各個地方高度復用我們的布局。嵌套的結構在組件內部都可以通過獲取到，這種組件編寫方式在編寫容器類型的組件當中非常有用。下一節中我們將介紹小書和屬性。 React.js 小書 Lesson22 - props.children 和容器類組件本文作者：胡子大哈本文原文：http://huziketang.co...

番茄西紅柿 2019-08-21 17:34 評論0 收藏0