React入門(mén)0x002: jsx

hedzr 發(fā)布于2019-08-26 12:17 / 1856人閱讀

摘要：概述也是，如是說(shuō)。屬性集合，比如等屬性對(duì)應(yīng)，是關(guān)鍵詞，所以用代替，也可以是自定義的屬性。形式送方外上人送上人孤云將野鶴，豈向人間住。莫買(mǎi)沃洲山，時(shí)人已知處。

0x000 概述

jsx也是js，如是說(shuō)。

0x001 語(yǔ)法

在上文React入門(mén)0x001-環(huán)境配置和 helloworld中，出現(xiàn)了一句奇怪的代碼：

Hello, world!

這在html中沒(méi)有任何問(wèn)題，但問(wèn)題是他出現(xiàn)在了js中，這就是jsx了，它的語(yǔ)法非常簡(jiǎn)單，卻也很神奇：

// 示例，之后會(huì)解析
// 保存到變量
let p = this is tag p
// 嵌套
let div = 
    {p}

// 執(zhí)行語(yǔ)句
let div2 = 
{
    div === undefined
        ? undefined
        : {div}
}

0x002 說(shuō)明

首先是為什么 js 中能夠識(shí)別 jsx 呢？這倒不是react的功勞，而是 babel 的功勞，在.babelrc中配置了一個(gè)插件：transform-react-jsx，就是這個(gè)插件，才能解析jsx，而這個(gè)插件是如果和解析的呢？我們可以查看這個(gè)插件的文檔：

輸入

var profile = 
  
  {[user.firstName, user.lastName].join(" ")}
;

輸出

var profile = React.createElement("div", null,
  React.createElement("img", { src: "avatar.png", className: "profile" }),
  React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
);

其中，jsx中的每一個(gè)標(biāo)簽變成了一個(gè) React.createElement(...)函數(shù)，而標(biāo)簽的名字，變成了該函數(shù)的第一個(gè)參數(shù)，而img標(biāo)簽的src和className等屬性變成了該函數(shù)的第二個(gè)參數(shù)，jsx中的嵌套元素，比如div中的img、h3變成了第三個(gè)參數(shù)。

具體是否是這樣，可以編譯來(lái)看看:

源代碼：

// src/jsx.js
var user = {
    firstName: "",
    lastName: ""
}
var profile = 
    
    {[user.firstName, user.lastName].join(" ")}
;

編譯：

$ npm install -g babel-cli
$ babel --plugins transform-react-jsx jsx.js 

"use strict";

var user = {
    firstName: "",
    lastName: ""
};
var profile = React.createElement(
    "div",
    null,
    React.createElement("img", { src: "avatar.png", className: "profile" }),
    React.createElement(
        "h3",
        null,
        [user.firstName, user.lastName].join(" ")
    )
);

0x003 React.createElement

該函數(shù)是由React提供的，所以我們可以看看它的文檔說(shuō)明：

React.createElement(
  type,
  [props],
  [...children]
)

參數(shù)：

type：類(lèi)型，可以是一個(gè)標(biāo)簽名字，比如p、div等html標(biāo)簽，也可以是一個(gè)React Component，或者React Fragment，具體之后再表。

props：屬性集合，比如src、className等html屬性（className對(duì)應(yīng)class，class是關(guān)鍵詞，所以用className代替），也可以是自定義的屬性。

children：React element子元素集合。

返回值：React element

0x004 總結(jié)

jsx只是一層語(yǔ)法糖，在babel的轉(zhuǎn)化下變成了相應(yīng)的js代碼，本質(zhì)上還是js，所以，在react中用jsx或者不用jsx都是沒(méi)有本質(zhì)區(qū)別的。上一篇文章中的代碼可以改為如下形式：

import React from "react"
import ReactDom from "react-dom"

ReactDom.render(
    React.createElement(
        "h1",
        null,
        "Hello, world!"
    ),
    document.getElementById("app")
);

查看瀏覽器：http://localhost:8080/

那為什么React推薦構(gòu)建UI的時(shí)候使用jsx，而不是使用js呢，用兩種形式實(shí)現(xiàn)對(duì)比一下就好了

React.createElement 形式

ReactDom.render(
    React.createElement(
        "div",
        null,
        React.createElement(
            "h1",
            null,
            "送方外上人 / 送上人"
        ),
        React.createElement(
            "p",
            null,
            "孤云將野鶴，豈向人間住。莫買(mǎi)沃洲山，時(shí)人已知處。"
        )
    ),
    document.getElementById("app")
)

jsx形式

ReactDom.render(
    
        送方外上人 / 送上人
        孤云將野鶴，豈向人間住。莫買(mǎi)沃洲山，時(shí)人已知處。
    ,
    document.getElementById("app")
)
;

可以看到，使用js形式有太多的""、)之類(lèi)影響布局視覺(jué)的符號(hào)，相對(duì)于html形式的jsx顯得繁雜而又不直觀，對(duì)原本的web開(kāi)發(fā)者也不友好，但這也只是一家之言，flutter在布局方面就采用的代碼形式的，視個(gè)人愛(ài)好而言的東西罷了！