資訊專欄INFORMATION COLUMN
摘要：概述也是，如是說。屬性集合，比如等屬性對應(yīng)，是關(guān)鍵詞，所以用代替，也可以是自定義的屬性。形式送方外上人送上人孤云將野鶴，豈向人間住。莫買沃洲山，時人已知處。
0x000 概述
jsx也是js， 如是說。
0x001 語法在上文React入門0x001-環(huán)境配置和 helloworld中， 出現(xiàn)了一句奇怪的代碼：
Hello, world!
這在html中沒有任何問題，但問題是他出現(xiàn)在了js中，這就是jsx了，它的語法非常簡單，卻也很神奇：
// 示例，之后會解析 // 保存到變量 let p =0x002 說明this is tag p
// 嵌套 let div ={p}// 執(zhí)行語句 let div2 ={ div === undefined ?undefined
: {div} }
首先是為什么 js 中能夠識別 jsx 呢？這倒不是react的功勞，而是 babel 的功勞，在.babelrc中配置了一個插件：transform-react-jsx，就是這個插件，才能解析jsx，而這個插件是如果和解析的呢？我們可以查看這個插件的文檔：
輸入
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中的每一個標(biāo)簽變成了一個 React.createElement(...)函數(shù)，而標(biāo)簽的名字，變成了該函數(shù)的第一個參數(shù)，而img標(biāo)簽的src和className等屬性變成了該函數(shù)的第二個參數(shù)，jsx中的嵌套元素，比如div中的img、h3變成了第三個參數(shù)。
具體是否是這樣，可以編譯來看看:
源代碼：
// 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提供的，所以我們可以看看它的文檔說明：
React.createElement( type, [props], [...children] )
參數(shù)：
type：類型，可以是一個標(biāo)簽名字，比如p、div等html標(biāo)簽，也可以是一個React Component，或者React Fragment，具體之后再表。
props：屬性集合，比如src、className等html屬性（className對應(yīng)class，class是關(guān)鍵詞，所以用className代替），也可以是自定義的屬性。
children：React element子元素集合。
返回值：React element
0x004 總結(jié)jsx只是一層語法糖，在babel的轉(zhuǎn)化下變成了相應(yīng)的js代碼，本質(zhì)上還是js，所以，在react中用jsx或者不用jsx都是沒有本質(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的時候使用jsx，而不是使用js呢，用兩種形式實現(xiàn)對比一下就好了
React.createElement 形式
ReactDom.render(
React.createElement(
"div",
null,
React.createElement(
"h1",
null,
"送方外上人 / 送上人"
),
React.createElement(
"p",
null,
"孤云將野鶴，豈向人間住。莫買沃洲山，時人已知處。"
)
),
document.getElementById("app")
)
jsx形式
ReactDom.render(
送方外上人 / 送上人
孤云將野鶴，豈向人間住。莫買沃洲山，時人已知處。
,
document.getElementById("app")
)
;
可以看到，使用js形式有太多的""、)之類影響布局視覺的符號，相對于html形式的jsx顯得繁雜而又不直觀，對原本的web開發(fā)者也不友好，但這也只是一家之言，flutter在布局方面就采用的代碼形式的，視個人愛好而言的東西罷了！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108424.html
摘要：概述說起來，我喜歡的還是他的思想，在中，實際上沒有的區(qū)別，全部都是，就和一樣，可以將所有的資源等同視之。但是這時候又出來說，我要把寫在中，真是煩透咯不過，這種東西不過是年一輪回，就和時尚一樣。 0x000 概述 說起來react，我喜歡的還是他的思想，在react中，實際上沒有html、css、js的區(qū)別，全部都是js，就和webpack一樣，可以將所有的資源等同視之。但是這在一開始，...
摘要：概述在中，渲染數(shù)據(jù)的形式有多種多樣，但是萬變不離其中，都是用。當(dāng)然，自由也帶來混亂，需要將這種自由化為思想的自由，而不是工程的自由代碼的自由，否則將會帶來噩夢。 0x000 概述 在React中，渲染數(shù)據(jù)的形式有多種多樣，但是萬變不離其中，都是用js。 0x001 渲染文本 // 渲染文本 ReactDom.render( 這是一個文本, document.getEle...
摘要：概述這一章講組件，組件才是的核心，也是構(gòu)建的項目中最小的單元。莫買沃洲山，時人已知處。是使用類的語法來寫，所以很多的思想可以套用到，但是一定要記得，這是，而不是資源源碼 0x000 概述 這一章講組件，組件才是React的核心，也是React構(gòu)建的項目中最小的單元。 0x001 組件 上面的章節(jié)有一個類似下面的栗子： const App = () => { return hel...
摘要：只有一個屬性，那就是栗子可展開收縮的表格源碼展開收起張三我很開心李四我也很開心王五我比張三和李四更開心效果 0x001 引出問題 讓我們先來看一個栗子： class App extends React.Component { render() { return ( ) } } Reac...
摘要：概述這一章講，是的核心，也算是的核心思想都很核心啊。但是接著我們又搞了一個定時器，每秒執(zhí)行一直函數(shù)，將修改為最新的時間。就完成了視圖的更新。參數(shù)一是要更新的數(shù)據(jù)，我們只需要傳輸我們要更新的數(shù)據(jù)即可，對于不需要更新的數(shù)據(jù)，則不需要理睬。 0x000 概述 這一章講state，state是MVVM的核心，也算是React的核心思想......都很核心啊。 0x001 問題 在上一章節(jié)的栗子...
閱讀 3025·2021-11-16 11:42
閱讀 3679·2021-09-08 09:36
閱讀 957·2019-08-30 12:52
閱讀 2494·2019-08-29 14:12
閱讀 784·2019-08-29 13:53
閱讀 3597·2019-08-29 12:16
閱讀 654·2019-08-29 12:12
閱讀 2480·2019-08-29 11:16
