概要

在 React 開發(fā)的語境下，JS (JavaScript) 和 JSX (JavaScript XML) 既是父子關(guān)系，也是“邏輯”與“視圖”的分工。

簡單來說，JSX 是 JS 的“增強版”。
在 React 開發(fā)中，它們的關(guān)系就像是“帶裝備的戰(zhàn)士”和“普通平民”。

雖然它們最終都會運行在瀏覽器中，但它們的編寫體驗、功能重點以及背后的處理機制完全不同。以下是它們的深度對比分析：

核心定義解釋

JS (Standard JavaScript)：它是互聯(lián)網(wǎng)的通用語言。它負責(zé)處理數(shù)據(jù)計算、API 請求、邏輯判斷以及所有的“思考”過程。

JSX (JavaScript XML)：它是 React 團隊開發(fā)的語法擴展。它的唯一目的就是：在 JavaScript 中像寫 HTML 一樣描述 UI 結(jié)構(gòu)。

語法直觀感受

如果你想在頁面上創(chuàng)建一個簡單的“登錄按鈕”，兩者的寫法差異如下：

JS 寫法（原生 React API）

如果不使用 JSX，你需要通過復(fù)雜的函數(shù)嵌套來描述 UI，這在嵌套多層時簡直是噩夢。

import { createElement } from 'react';

const LoginButton = () => {
  return createElement(
    'button',
    { className: 'btn-primary', onClick: () => console.log('Login!') },
    '點擊登錄'
  );
};

JSX 寫法（現(xiàn)代 React 推薦）

代碼非常直觀，你一眼就能看出 HTML 的結(jié)構(gòu)。

const LoginButton = () => {
  return (
    <button className="btn-primary" onClick={() => console.log('Login!')}>
      點擊登錄
    </button>
  );
};

關(guān)鍵差異對照

vite中可以直接用JSX
CRA中js可以引入Babel工具包來編譯

在 Vite 項目中的“潛規(guī)則”

Vite 對后綴名的處理非常嚴格：

強制性：如果你在.js文件里寫了 <div> 這樣的標簽，Vite 會直接報錯。

性能：Vite 在處理 .js 時跳過語法掃描以加快速度；只有遇到 .jsx 時才會調(diào)用編譯插件進行轉(zhuǎn)換。

混合使用：

業(yè)務(wù)邏輯（如校驗手機號、本地存儲封裝）放進 .js 文件。

頁面組件（包含 HTML 結(jié)構(gòu)的）放進.jsx文件。

如何轉(zhuǎn)化的？

當你保存一個.jsx文件時，Vite 內(nèi)部的編譯器（esbuild）會自動進行以下操作：

輸入 (JSX):

<div id="box">Hello</div>

輸出 (底層 JS):

// 這才是瀏覽器真正執(zhí)行的代碼
_jsx("div", { id: "box", children: "Hello" });

JSX 的核心語法規(guī)則

要在.jsx文件里寫好代碼，必須遵守這 4 條“鐵律”：

① 只能有一個根元素

如果你想返回多個標簽，必須把它們包在一個父元素里，或者使用空標簽 <></>。

return (
  <>
    <h1>標題</h1>
    <p>內(nèi)容</p>
  </>
)

② 使用大括號 { } 插入 JS 變量

在大括號里，你可以寫任何有返回值的 JS 表達式（變量、函數(shù)調(diào)用、算術(shù)運算）。

const name = 'Gemini';
return <div>你好，{name}！今年是 {new Date().getFullYear()} 年。</div>;

③ 駝峰命名屬性

因為 JSX 本質(zhì)是 JS，而 JS 對關(guān)鍵字（如 class）有限制，所以：

class 寫作 className

for 寫作 htmlFor

onclick 寫作 onClick

④ 必須閉合標簽

即使是沒有內(nèi)容的標簽，也必須閉合。

<img src="logo.png" />  // ? 必須加最后的斜杠
<br />                  // ? 必須閉合

JSX 中的條件與列表

在 JSX 里不能直接寫 if 或 for 語句，我們使用 JS 的原生特性替代：

條件渲染：使用三元運算符? :或邏輯與 &&。

<div>{isLogin ? <User /> : <Login />}</div>

列表渲染：使用數(shù)組的 .map() 方法。

<ul>
  {list.map(item => <li key={item.id}>{item.name}</li>)}
</ul>

小結(jié)

在處理邏輯、算法、數(shù)據(jù)格式化，使用 JS。

在處理頁面、組件、標簽布局，使用 JSX。

到此這篇關(guān)于jsx和js區(qū)別深度對比分析的文章就介紹到這了,更多相關(guān)jsx和js區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論