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

ChanceWong 發(fā)布于2019-08-21 17:33 / 1767人閱讀

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

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

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

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

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

這一節(jié)我們通過一個簡單的例子講解 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 的包當(dāng)中引入了 React 和 React.js 的組件父類 Component。記住，只要你要寫 React.js 組件，那么就必須要引入這兩個東西。

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

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

JSX 原理

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

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


  Hello

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

所以其實上面這個 HTML 所有的信息我們都可以用合法的 JavaScript 對象來表示：

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

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

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

上面的代碼：

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")
)

經(jīng)過編譯以后會變成：

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

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

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

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

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

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

有些同學(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 元素，并且渲染到面上。

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

GPU云服務(wù)器云服務(wù)器 html里使用jsx React.js react.js cdn 小書

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89675.html

發(fā)表評論

登陸后可評論

0條評論

ChanceWong

男|高級講師

我要關(guān)注我要私信

TA的文章

SSL證書有效期是多久？SSL證書不能用是哪些原因?qū)е碌模?/a>

閱讀 956·2021-11-22 13:54

?Java枚舉實例---交通燈，一文帶你深入理解枚舉，了解融會貫通JAVA SE所該具備的能力【Ja

閱讀 2900·2021-09-28 09:36
偽類與偽元素

閱讀 3012·2019-08-30 15:55
A human being,who loves football and music.

閱讀 1974·2019-08-30 15:44
前端面試寶典

閱讀 573·2019-08-29 12:31
一個簡單的瀑布流實現(xiàn)。

閱讀 2592·2019-08-28 18:18
vue強(qiáng)制重新渲染組件

閱讀 1233·2019-08-26 13:58
react本質(zhì)：JSX如何轉(zhuǎn)化為javascript

閱讀 1424·2019-08-26 13:44

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

React 小書

React 小書

相關(guān)文章

React.js 小書 Lesson5 - React.js 基本環(huán)境安裝

**寫一本關(guān)于 React.js 的小書**

2017-09-16 前端日報

React.js 小書 Lesson7 - 組件的 render 方法

React.js 小書 Lesson22 - props.children 和容器類組件

發(fā)表評論

0條評論

ChanceWong

男|高級講師

TA的文章

SSL證書有效期是多久？SSL證書不能用是哪些原因?qū)е碌模?/a>

?Java枚舉實例---交通燈，一文帶你深入理解枚舉，了解融會貫通JAVA SE所該具備的能力【Ja

偽類與偽元素

A human being,who loves football and music.

前端面試寶典

一個簡單的瀑布流實現(xiàn)。

vue強(qiáng)制重新渲染組件

react本質(zhì)：JSX如何轉(zhuǎn)化為javascript

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

React 小書

React 小書

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！