深入理解 JSX：從零開始實現一個 JSX 解析器

作者：CUGGZ 2023-07-25 14:24:33

本質上，這里使用標簽值創建一個包裝元素，為其添加屬性（如果有的話），最后，遍歷子列表（這是一個包含所有添加屬性的剩余屬性），在此過程中，將簡單地將這些值作為字符串返回（第 9 行）。

JSX 表示 JavaScript XML，它是 JavaScript 的擴展，允許開發人員在 JavaScript 代碼中使用類似 HTML 的語法。此擴展使組件的組合更易于閱讀，它隨著 React 一起出現，簡化了在 HTML 和 JavaScript 中編寫代碼的方式。

那 JSX 究竟是如何工作的呢？它背后又有怎樣的奇技淫巧？本文將介紹 JSX 的基本用法，然后從零開始編寫一個 JSX 解析器，將 JSX “組件”轉換為實際返回的有效 HTML 的JavaScript 代碼。

1、JSX 概述

基本語法

JSX 是 JavaScript XML 的縮寫，它是一種在JavaScript代碼中編寫類似于HTML結構和語法的擴展。通過使用JSX，可以更直觀地描述組件的結構，并使得代碼更易于閱讀和維護。盡管JSX看起來像HTML，但它實際上是通過編譯器轉換為純JavaScript代碼的。在編譯過程中，JSX元素會被轉換為React.createElement()函數的調用，創建相應的React元素。

JSX 允許創建自定義元素并在 React 應用中重用它們。在下面的示例中，Main 組件包裝在 main 標簽中。它還允許在 HTML 標簽中嵌入 JavaScript 表達式。在下面的示例中，“Main content”文本是一個將被計算并渲染為文本的表達式。

使用 JSX，您可以構建如下組件：

function App() {
  return (
    <div>
      <h1>Hello</h1>
    </div>
  )
}

這段代碼 return 之后的就是JSX。

使用 JSX 的主要好處之一是它使代碼更具可讀性和簡潔性。來看下面的代碼塊，比較了帶有和不帶有 JSX 的簡單列表。

// 非 JSX
const fruits = ["apple", "banana", "cherry"];

// JSX
const jsxFruits = [<li>apple</li>, <li>banana</li>, <li>cherry</li>];

JSX 還具有許多使其比 HTML 使用起來更方便的功能。例如，可以在 JSX 標簽內使用 JavaScript 表達式來動態創建和填充 HTML 元素。還可以使用內置 JavaScript 函數來操作 HTML 元素并設置其樣式。

需要注意，JSX 屬性使用駝峰命名約定而不是 HTML 屬性名稱。

<button onClick = {handleClick}>Click</button>
<div className = "hello"> Div </div>
<label htmlFor="">Label</label>

JSX 表達式只能有一個父元素

JSX 表達式只能有一個父元素，那為什么不能有多個父元素呢？

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

下面就來看看原因！

JSX 是 React.createElement 的語法糖，它是一個普通的 JavaScript 方法。 JSX 被編譯成瀏覽器可以理解的普通 JavaScript。

要像在沒有 JSX 的情況下創建 React 元素，可以在 React 對象上使用 createElement 方法。該方法的語法是：

React.createElement(element, props, ...children)

例如，對于以下 JSX：

function App() {
  return (
    <div>
      <h1>Hello</h1>
    </div>
  )
}

是以下代碼的語法糖：

function App() {
  return React.createElement(
    "div",
    null,
    React.createElement("h1", null, "Hello")
  )
}

那如果在根上想要兩個父元素怎么辦？就像上面的第一個例子一樣：

function App() {
  return (
    <div>Why</div>
    <div>Can I not do this?</div>
  )
}

這段 JSX 會編譯為：

function App() {
  return React.createElement("div", null, "Why")
  React.createElement("div", null, "Can I not do this?")
}

這里嘗試一次返回兩個內容，但這并不是一段有效的 JavaScript。因此，只能返回一個父元素，而該父元素可以有任意數量的子元素。要返回多個子元素，可以將它們作為參數傳遞給 createElement，如下所示：

return React.createElement(
  "h1",
  null,
  "Hello",
  "Hi",
  React.createElement("span", null, "Hello")
  // 其他子元素
)

其 JSX 表示為：

return (
  <h1>
    Hello Hi
    <span>Hello</span>
  </h1>
)

接下來，檢查一下之前的代碼塊：

function App() {
  return (
    <div>
      {isOpen && (
        <div>Why again</div>
        <div>Can I not do this</div>
      )}
    </div>
  )
}

這個有一個根父級 div，但仍然會報錯： isOpen 表達式中有多個父級。為什么？

如果只使用一個 div 標簽：

function App() {
  return <div>{isOpen && <div>Why again</div>}</div>
}

這會編譯為：

function App() {
  return React.createElement(
    "div",
    null,
    isOpen && React.createElement("div", null, "Why again")
  )
}

isOpen 表達式是第一個 createElement 中的子級，該表達式使用邏輯 && 運算符將第二個 createElement 父級作為子級添加到第一個 createElement 中。

這意味著這段代碼有兩個父級：

function App() {
  return (
    <div>
      {isOpen && (
        <div>Why again</div>
        <div>Can I not do this</div>
      )}
    </div>
  )
}

這會編譯為：

function App() {
  return React.createElement(
    "div",
    null,
    isOpen
    && React.createElement("div", null, "Why again")
    React.createElement("div", null, "Can I not do this")
  )
}

這段代碼是錯誤的語法，因為在 && 運算符之后，嘗試返回兩個內容，而 JavaScript 只允許一次返回一個表達式。返回的表達式應該有一個父表達式和多個的子表達式。

這就是為什么 JSX 表達式只能有一個父元素。

2、實現 JSX 解析器

先來看看最終要解析的 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 中編寫這段代碼，會得到這樣的東西：

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

這里唯一改變的就是初始導入，接下來編寫 JSX 時，你就會明白為什么需要導入 React。

雖然解析本身需要一些工作，但其背后的邏輯實際上非常簡單。 React 官方文檔就展示了解析 JSX 的輸出。

圖片

這里實際上是將每個 JSX 元素轉換為對React.createElement的調用。因此，需要導入React，即使并沒有直接使用它，一旦解析完成，生成的JavaScript代碼將使用到它。

React.createElement 方法的第一個屬性是要創建的元素的標簽名。第二個屬性是一個包含與正在創建的元素相關的所有屬性的對象，其余的屬性（可以有一個或多個）將成為此元素的直接子級（它們可以是純文本或其他元素）。

因此，實現 JSX 解析器的大致步驟總結如下：

捕獲 JavaScript 中的 JSX。
將其解析為可以遍歷和查詢的樹狀結構。
將該結構轉換為將代替 JSX 編寫的 JavaScript 代碼（文本）。
將步驟 3 的輸出保存到磁盤中，并保存為擴展名為 .js 的文件。

（1）從組件中提取并解析 JSX

第一步就是通過某種方式從組件中提取 JSX 并將其解析為樹狀結構。

我們需要做的第一件事是讀取 JSX 文件，然后使用正則表達式來捕獲 JSX 代碼。最后，就可以使用 HTML 解析器來解析它。

此時，我們關心的是結構，而不是 JSX 的實際功能。因此，可以使用 Node 中的 fs 模塊和 node-html-parser 包來讀取文件。

該函數如下所示：

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 函數使用 RegExp 來查找函數中第一個組件的開始標簽。在第 10 行調用了解析函數，該函數返回一個根元素，其中 firstChild 是 JSX 中的根元素（在開始的例子中是 div 元素）。

現在有了樹狀結構，就可以將其轉換為代碼了。為此，將調用 translate 函數。

（2）將 HTML 轉譯為 JS 代碼

由于處理的樹狀結構的深度有限，因此可以安全地使用遞歸來遍歷這棵樹。

該函數如下所示：

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)
    }
    // 文本節點
    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})`
    
}

首先，遍歷所有子項，并對它們調用 translate 函數。如果子級為空，則該調用將返回 null，將在第 7 行過濾這些結果。

處理完子節點后，接下來看一下第 9 行，在其中對節點類型進行快速健全性檢查。如果類型為 3，則意味著這是一個文本節點，將返回解析后的文本。

為什么要調用 parseText 函數呢？因為即使在文本節點內部，我們也需要在 {…} 中查找 JSX 表達式。因此，如果需要，此函數將負責檢查并正確更改返回的字符串。

接下來，獲取標簽名稱（第 14 行），然后解析屬性（第 16 行）。解析屬性意味著將獲取原始字符串并將其轉換為正確的 JSON。

最后，返回想要生成的代碼行（即使用正確的參數調用 createElement）。

注意，生成的代碼會從 MyLib 模塊調用 createElement 方法。這就是為什么在 JSX 文件內有 import * as MyLib from './MyLib.js' 的原因。

接下來就需要處理字符串來替換 JSX 表達式，無論是在文本節點還是每個元素的屬性對象內。

（3）解析表達式

在此實現中支持的 JSX 表達式類型是最簡單的一種。正如示例中看到的，可以在這些表達式中添加 JS 變量，它們將在最終輸出中保留為變量。

以下是執行此操作的函數：

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
}

如果有插值（即大括號內的變量），就會調用replaceInterpolation函數，該函數會遍歷所有匹配的插值，并將它們替換為正確格式的字符串（本質上以在寫入JS文件時生成JS變量的方式保留變量名稱）。

我們也將這些函數與屬性對象一起使用。由于在返回 JS 代碼時使用 JSON.stringify 方法，因此該函數會將所有值轉換為字符串。因此，將解析 stringify 方法返回的字符串，并確保正確替換插值變量。

getAttrs 函數的實現如下：

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 代碼

接下來看一下解析 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())

這段代碼真正有趣的地方是生成的對 createElement 的調用。可以看到它們是如何嵌套的，以及它們引用了在 JSX 文件中插回的變量。

如果執行這段代碼，輸出如下：

<div class="open" ref="null">
  <h1 >
  Hello Fernando!
  </h1>
</div>

那 createElement 方法是如何實現的呢？這里有一個簡化的版本：

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}>
    `
}

這樣，一個簡易的 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")
})()

責任編輯：武曉燕來源：前端充電寶

元素 JSX 解析器

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看