深入理解 JSX：從零開始實(shí)現(xiàn)一個(gè) JSX 解析器
JSX 表示 JavaScript XML，它是 JavaScript 的擴(kuò)展，允許開發(fā)人員在 JavaScript 代碼中使用類似 HTML 的語(yǔ)法。此擴(kuò)展使組件的組合更易于閱讀，它隨著 React 一起出現(xiàn)，簡(jiǎn)化了在 HTML 和 JavaScript 中編寫代碼的方式。
那 JSX 究竟是如何工作的呢？它背后又有怎樣的奇技淫巧？本文將介紹 JSX 的基本用法，然后從零開始編寫一個(gè) JSX 解析器，將 JSX “組件”轉(zhuǎn)換為實(shí)際返回的有效 HTML 的JavaScript 代碼。
1、JSX 概述
基本語(yǔ)法
JSX 是 JavaScript XML 的縮寫，它是一種在JavaScript代碼中編寫類似于HTML結(jié)構(gòu)和語(yǔ)法的擴(kuò)展。通過(guò)使用JSX，可以更直觀地描述組件的結(jié)構(gòu)，并使得代碼更易于閱讀和維護(hù)。盡管JSX看起來(lái)像HTML，但它實(shí)際上是通過(guò)編譯器轉(zhuǎn)換為純JavaScript代碼的。在編譯過(guò)程中，JSX元素會(huì)被轉(zhuǎn)換為React.createElement()函數(shù)的調(diào)用，創(chuàng)建相應(yīng)的React元素。
JSX 允許創(chuàng)建自定義元素并在 React 應(yīng)用中重用它們。 在下面的示例中，Main 組件包裝在 main 標(biāo)簽中。 它還允許在 HTML 標(biāo)簽中嵌入 JavaScript 表達(dá)式。 在下面的示例中，“Main content”文本是一個(gè)將被計(jì)算并渲染為文本的表達(dá)式。
使用 JSX，您可以構(gòu)建如下組件：
function App() {
return (
<div>
<h1>Hello</h1>
</div>
)
}這段代碼 return 之后的就是JSX。
使用 JSX 的主要好處之一是它使代碼更具可讀性和簡(jiǎn)潔性。來(lái)看下面的代碼塊，比較了帶有和不帶有 JSX 的簡(jiǎn)單列表。
// 非 JSX
const fruits = ["apple", "banana", "cherry"];
// JSX
const jsxFruits = [<li>apple</li>, <li>banana</li>, <li>cherry</li>];JSX 還具有許多使其比 HTML 使用起來(lái)更方便的功能。例如，可以在 JSX 標(biāo)簽內(nèi)使用 JavaScript 表達(dá)式來(lái)動(dòng)態(tài)創(chuàng)建和填充 HTML 元素。還可以使用內(nèi)置 JavaScript 函數(shù)來(lái)操作 HTML 元素并設(shè)置其樣式。
需要注意，JSX 屬性使用駝峰命名約定而不是 HTML 屬性名稱。
<button onClick = {handleClick}>Click</button>
<div className = "hello"> Div </div>
<label htmlFor="">Label</label>JSX 表達(dá)式只能有一個(gè)父元素
JSX 表達(dá)式只能有一個(gè)父元素，那為什么不能有多個(gè)父元素呢？
function App() {
return (
<div>Why</div>
<div>Can I not do this?</div>
)
}或者：
function App() {
return (
<div>
{isOpen && (
<div>Why again</div>
<div>Can I not do this</div>
)}
</div>
)
}下面就來(lái)看看原因！
JSX 是 React.createElement 的語(yǔ)法糖，它是一個(gè)普通的 JavaScript 方法。 JSX 被編譯成瀏覽器可以理解的普通 JavaScript。
要像在沒有 JSX 的情況下創(chuàng)建 React 元素，可以在 React 對(duì)象上使用 createElement 方法。 該方法的語(yǔ)法是：
React.createElement(element, props, ...children)例如，對(duì)于以下 JSX：
function App() {
return (
<div>
<h1>Hello</h1>
</div>
)
}是以下代碼的語(yǔ)法糖：
function App() {
return React.createElement(
"div",
null,
React.createElement("h1", null, "Hello")
)
}那如果在根上想要兩個(gè)父元素怎么辦？ 就像上面的第一個(gè)例子一樣：
function App() {
return (
<div>Why</div>
<div>Can I not do this?</div>
)
}這段 JSX 會(huì)編譯為：
function App() {
return React.createElement("div", null, "Why")
React.createElement("div", null, "Can I not do this?")
}這里嘗試一次返回兩個(gè)內(nèi)容，但這并不是一段有效的 JavaScript。因此，只能返回一個(gè)父元素，而該父元素可以有任意數(shù)量的子元素。要返回多個(gè)子元素，可以將它們作為參數(shù)傳遞給 createElement，如下所示：
return React.createElement(
"h1",
null,
"Hello",
"Hi",
React.createElement("span", null, "Hello")
// 其他子元素
)其 JSX 表示為：
return (
<h1>
Hello Hi
<span>Hello</span>
</h1>
)接下來(lái)，檢查一下之前的代碼塊：
function App() {
return (
<div>
{isOpen && (
<div>Why again</div>
<div>Can I not do this</div>
)}
</div>
)
}這個(gè)有一個(gè)根父級(jí) div，但仍然會(huì)報(bào)錯(cuò)： isOpen 表達(dá)式中有多個(gè)父級(jí)。 為什么？
如果只使用一個(gè) div 標(biāo)簽：
function App() {
return <div>{isOpen && <div>Why again</div>}</div>
}這會(huì)編譯為：
function App() {
return React.createElement(
"div",
null,
isOpen && React.createElement("div", null, "Why again")
)
}isOpen 表達(dá)式是第一個(gè) createElement 中的子級(jí)，該表達(dá)式使用邏輯 && 運(yùn)算符將第二個(gè) createElement 父級(jí)作為子級(jí)添加到第一個(gè) createElement 中。
這意味著這段代碼有兩個(gè)父級(jí)：
function App() {
return (
<div>
{isOpen && (
<div>Why again</div>
<div>Can I not do this</div>
)}
</div>
)
}這會(huì)編譯為：
function App() {
return React.createElement(
"div",
null,
isOpen
&& React.createElement("div", null, "Why again")
React.createElement("div", null, "Can I not do this")
)
}這段代碼是錯(cuò)誤的語(yǔ)法，因?yàn)樵?nbsp;&& 運(yùn)算符之后，嘗試返回兩個(gè)內(nèi)容，而 JavaScript 只允許一次返回一個(gè)表達(dá)式。 返回的表達(dá)式應(yīng)該有一個(gè)父表達(dá)式和多個(gè)的子表達(dá)式。
這就是為什么 JSX 表達(dá)式只能有一個(gè)父元素。
2、實(shí)現(xiàn) JSX 解析器
先來(lái)看看最終要解析的 JSX 文件：
import * as MyLib from './MyLib.js'
export function Component() {
let myRef = null
let name = "Fernando"
let myClass = "open"
return (
<div className={myClass} ref={myRef}>
<h1>Hello {name}!</h1>
</div>
)
}
console.log(Component())如果在 React 中編寫這段代碼，會(huì)得到這樣的東西：
import * as React from 'react'
export function Component() {
let myRef = null
let name = "Fernando"
let myClass = "open"
return (
<div className={myClass} ref={myRef}>
<h1>Hello {name}!</h1>
</div>
)
}
console.log(Component())這里唯一改變的就是初始導(dǎo)入，接下來(lái)編寫 JSX 時(shí)，你就會(huì)明白為什么需要導(dǎo)入 React。
雖然解析本身需要一些工作，但其背后的邏輯實(shí)際上非常簡(jiǎn)單。 React 官方文檔就展示了解析 JSX 的輸出。
圖片
這里實(shí)際上是將每個(gè) JSX 元素轉(zhuǎn)換為對(duì)React.createElement的調(diào)用。因此，需要導(dǎo)入React，即使并沒有直接使用它，一旦解析完成，生成的JavaScript代碼將使用到它。
React.createElement 方法的第一個(gè)屬性是要?jiǎng)?chuàng)建的元素的標(biāo)簽名。第二個(gè)屬性是一個(gè)包含與正在創(chuàng)建的元素相關(guān)的所有屬性的對(duì)象，其余的屬性（可以有一個(gè)或多個(gè)）將成為此元素的直接子級(jí)（它們可以是純文本或其他元素）。
因此，實(shí)現(xiàn) JSX 解析器的大致步驟總結(jié)如下：
- 捕獲 JavaScript 中的 JSX。
- 將其解析為可以遍歷和查詢的樹狀結(jié)構(gòu)。
- 將該結(jié)構(gòu)轉(zhuǎn)換為將代替 JSX 編寫的 JavaScript 代碼（文本）。
- 將步驟 3 的輸出保存到磁盤中，并保存為擴(kuò)展名為 .js 的文件。
（1）從組件中提取并解析 JSX
第一步就是通過(guò)某種方式從組件中提取 JSX 并將其解析為樹狀結(jié)構(gòu)。
我們需要做的第一件事是讀取 JSX 文件，然后使用正則表達(dá)式來(lái)捕獲 JSX 代碼。最后，就可以使用 HTML 解析器來(lái)解析它。
此時(shí)，我們關(guān)心的是結(jié)構(gòu)，而不是 JSX 的實(shí)際功能。 因此，可以使用 Node 中的 fs 模塊和 node-html-parser 包來(lái)讀取文件。
該函數(shù)如下所示：
const JSX_STRING = /\(\s*(<.*)>\s*\)/gs
async function parseJSXFile(fname) {
let content = await fs.promises.readFile(fname)
let str = content.toString()
let matches = JSX_STRING.exec(str)
if(matches) {
let HTML = matches[1] + ">"
const root = parse(HTML)
let translated = (translate(root.firstChild))
str = str.replace(matches[1] + ">", translated)
await fs.promises.writeFile("output.js", str)
}
}parseJSXFile 函數(shù)使用 RegExp 來(lái)查找函數(shù)中第一個(gè)組件的開始標(biāo)簽。在第 10 行調(diào)用了解析函數(shù)，該函數(shù)返回一個(gè)根元素，其中 firstChild 是 JSX 中的根元素（在開始的例子中是 div 元素）。
現(xiàn)在有了樹狀結(jié)構(gòu)，就可以將其轉(zhuǎn)換為代碼了。 為此，將調(diào)用 translate 函數(shù)。
（2）將 HTML 轉(zhuǎn)譯為 JS 代碼
由于處理的樹狀結(jié)構(gòu)的深度有限，因此可以安全地使用遞歸來(lái)遍歷這棵樹。
該函數(shù)如下所示：
function translate(root) {
if(Array.isArray(root) && root.length == 0) return
let children = []
if(root.childNodes.length > 0) {
children = root.childNodes.map( child => translate(child) ).filter( c => c != null)
}
// 文本節(jié)點(diǎn)
if(root.nodeType == 3) {
if(root._rawText.trim() === "") return null
return parseText(root._rawText)
}
let tagName = root.rawTagName
let opts = getAttrs(root.rawAttrs)
return `MyLib.createElement("${tagName}", ${replaceInterpolations(JSON.stringify(opts, replacer), true)}, ${children})`
}首先，遍歷所有子項(xiàng)，并對(duì)它們調(diào)用 translate 函數(shù)。 如果子級(jí)為空，則該調(diào)用將返回 null，將在第 7 行過(guò)濾這些結(jié)果。
處理完子節(jié)點(diǎn)后，接下來(lái)看一下第 9 行，在其中對(duì)節(jié)點(diǎn)類型進(jìn)行快速健全性檢查。如果類型為 3，則意味著這是一個(gè)文本節(jié)點(diǎn)，將返回解析后的文本。
為什么要調(diào)用 parseText 函數(shù)呢？ 因?yàn)榧词乖谖谋竟?jié)點(diǎn)內(nèi)部，我們也需要在 {…} 中查找 JSX 表達(dá)式。 因此，如果需要，此函數(shù)將負(fù)責(zé)檢查并正確更改返回的字符串。
接下來(lái)，獲取標(biāo)簽名稱（第 14 行），然后解析屬性（第 16 行）。 解析屬性意味著將獲取原始字符串并將其轉(zhuǎn)換為正確的 JSON。
最后，返回想要生成的代碼行（即使用正確的參數(shù)調(diào)用 createElement）。
注意，生成的代碼會(huì)從 MyLib 模塊調(diào)用 createElement 方法。這就是為什么在 JSX 文件內(nèi)有 import * as MyLib from './MyLib.js' 的原因。
接下來(lái)就需要處理字符串來(lái)替換 JSX 表達(dá)式，無(wú)論是在文本節(jié)點(diǎn)還是每個(gè)元素的屬性對(duì)象內(nèi)。
（3）解析表達(dá)式
在此實(shí)現(xiàn)中支持的 JSX 表達(dá)式類型是最簡(jiǎn)單的一種。正如示例中看到的，可以在這些表達(dá)式中添加 JS 變量，它們將在最終輸出中保留為變量。
以下是執(zhí)行此操作的函數(shù)：
const JSX_INTERPOLATION = /\{([a-zA-Z0-9]+)\}/gs
function parseText(txt) {
let interpolations = txt.match(JSX_INTERPOLATION)
if(!interpolations) {
return txt
} else {
txt = replaceInterpolations(txt)
return `"${txt}"`
}
}
function replaceInterpolations(txt, isOnJSON = false) {
let interpolations = null;
while(interpolations = JSX_INTERPOLATION.exec(txt)) {
if(isOnJSON) {
txt = txt.replace(`"{${interpolations[1]}}"`, interpolations[1])
} else {
txt = txt.replace(`{${interpolations[1]}}`, `"+ ${interpolations[1]} +"`)
}
}
return txt
}如果有插值（即大括號(hào)內(nèi)的變量），就會(huì)調(diào)用replaceInterpolation函數(shù)，該函數(shù)會(huì)遍歷所有匹配的插值，并將它們替換為正確格式的字符串（本質(zhì)上以在寫入JS文件時(shí)生成JS變量的方式保留變量名稱）。
我們也將這些函數(shù)與屬性對(duì)象一起使用。 由于在返回 JS 代碼時(shí)使用 JSON.stringify 方法，因此該函數(shù)會(huì)將所有值轉(zhuǎn)換為字符串。 因此，將解析 stringify 方法返回的字符串，并確保正確替換插值變量。
getAttrs 函數(shù)的實(shí)現(xiàn)如下：
function getAttrs(attrsStr) {
if(attrsStr.trim().length == 0) return {}
let objAttrs = {}
let parts = attrsStr.split(" ")
parts.forEach( p => {
const [name, value] = p.split("=")
console.log(name)
console.log(value)
objAttrs[name] = (value)
})
return objAttrs
}（4）JavaScript 代碼
接下來(lái)看一下解析 JSX 文件所輸出的代碼：
import * as MyLib from './MyLib.js'
export function Component() {
let myRef = null
let name = "Fernando"
let myClass = "open"
return (
MyLib.createElement("div",
{"className":myClass,"ref":myRef},
MyLib.createElement(
"h1",
{},
"Hello "+ name +"!"))
)
}
console.log(Component())這段代碼真正有趣的地方是生成的對(duì) createElement 的調(diào)用。 可以看到它們是如何嵌套的，以及它們引用了在 JSX 文件中插回的變量。
如果執(zhí)行這段代碼，輸出如下：
<div class="open" ref="null">
<h1 >
Hello Fernando!
</h1>
</div>那 createElement 方法是如何實(shí)現(xiàn)的呢？這里有一個(gè)簡(jiǎn)化的版本：
function mapAttrName(name) {
if(name == "className") return "class"
return name
}
export function createElement(tag, opts, ...children) {
return `<${tag} ${Object.keys(opts).map(oname => `${mapAttrName(oname)}="${opts[oname]}"`).join(" ")}>
${children.map( c => c)}
</${tag}>
`
}本質(zhì)上，這里使用標(biāo)簽值創(chuàng)建一個(gè)包裝元素，為其添加屬性（如果有的話），最后，遍歷子列表（這是一個(gè)包含所有添加屬性的剩余屬性），在此過(guò)程中，將簡(jiǎn)單地將這些值作為字符串返回（第 9 行）。
這樣，一個(gè)簡(jiǎn)易的 JSX 解析器就完成了，下面是完整的代碼：
import * as fs from 'fs'
import { parse } from 'node-html-parser';
const JSX_STRING = /\(\s*(<.*)>\s*\)/gs
const JSX_INTERPOLATION = /\{([a-zA-Z0-9]+)\}/gs
const QUOTED_STRING = /["|'](.*)["|']/gs
function getAttrs(attrsStr) {
if(attrsStr.trim().length == 0) return {}
let objAttrs = {}
let parts = attrsStr.split(" ")
parts.forEach( p => {
const [name, value] = p.split("=")
console.log(name)
console.log(value)
objAttrs[name] = (value)
})
return objAttrs
}
function parseText(txt) {
let interpolations = txt.match(JSX_INTERPOLATION)
if(!interpolations) {
console.log("no inerpolation found: ", txt)
return txt
} else {
console.log("inerpolation found!", txt)
txt = replaceInterpolations(txt)
// interpolations.shift()
// interpolations.forEach( v => {
// txt = txt.replace(`{${v}}`, `" + (${v}) + "`)
// })
return `"${txt}"`
}
}
function replacer(k, v) {
if(k) {
let quoted = QUOTED_STRING.exec(v)
if(quoted) {
return parseText(quoted[1])
}
return (v)
} else {
return v
}
}
function replaceInterpolations(txt, isOnJSON = false) {
let interpolations = null;
while(interpolations = JSX_INTERPOLATION.exec(txt)) {
console.log("fixing interpolation for ", txt)
console.log(interpolations)
if(isOnJSON) {
txt = txt.replace(`"{${interpolations[1]}}"`, interpolations[1])
} else {
txt = txt.replace(`{${interpolations[1]}}`, `"+ ${interpolations[1]} +"`)
}
}
return txt
}
function translate(root) {
if(Array.isArray(root) && root.length == 0) return
console.log("Current root: ")
console.log(root)
let children = []
if(root.childNodes.length > 0) {
children = root.childNodes.map( child => translate(child) ).filter( c => c != null)
}
if(root.nodeType == 3) { //Textnodes
if(root._rawText.trim() === "") return null
return parseText(root._rawText)
}
let tagName = root.rawTagName
let opts = getAttrs(root.rawAttrs)
console.log("Opts: ")
console.log(opts)
console.log(JSON.stringify(opts))
return `MyLib.createElement("${tagName}", ${replaceInterpolations(JSON.stringify(opts, replacer), true)}, ${children})`
}
async function parseJSXFile(fname) {
let content = await fs.promises.readFile(fname)
let str = content.toString()
let matches = JSX_STRING.exec(str)
if(matches) {
let HTML = matches[1] + ">"
console.log("parsed html")
console.log(HTML)
const root = parse(HTML)
//console.log(root.firstChild)
let translated = (translate(root.firstChild))
str = str.replace(matches[1] + ">", translated)
await fs.promises.writeFile("output.js", str)
}
}
(async () => {
await parseJSXFile("./file.jsx")
})()
