jsx和js的区别深度对比分析

概要

在 React 开发的语境下，JS (JavaScript) 和 JSX (JavaScript XML) 既是父子关系，也是“逻辑”与“视图”的分工。

简单来说，JSX 是 JS 的“增强版”。
在 React 开发中，它们的关系就像是“带装备的战士”和“普通平民”。

虽然它们最终都会运行在浏览器中，但它们的编写体验、功能重点以及背后的处理机制完全不同。以下是它们的深度对比分析：

核心定义解释

JS (Standard JavaScript)：它是互联网的通用语言。它负责处理数据计算、API 请求、逻辑判断以及所有的“思考”过程。

JSX (JavaScript XML)：它是 React 团队开发的语法扩展。它的唯一目的就是：在 JavaScript 中像写 HTML 一样描述 UI 结构。

语法直观感受

如果你想在页面上创建一个简单的“登录按钮”，两者的写法差异如下：

JS 写法（原生 React API）

如果不使用 JSX，你需要通过复杂的函数嵌套来描述 UI，这在嵌套多层时简直是噩梦。

import { createElement } from 'react';

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

JSX 写法（现代 React 推荐）

代码非常直观，你一眼就能看出 HTML 的结构。

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

关键差异对照

vite中可以直接用JSX
CRA中js可以引入Babel工具包来编译

在 Vite 项目中的“潜规则”

Vite 对后缀名的处理非常严格：

强制性：如果你在.js文件里写了 <div> 这样的标签，Vite 会直接报错。

性能：Vite 在处理 .js 时跳过语法扫描以加快速度；只有遇到 .jsx 时才会调用编译插件进行转换。

混合使用：

业务逻辑（如校验手机号、本地存储封装）放进 .js 文件。

页面组件（包含 HTML 结构的）放进.jsx文件。

如何转化的？

当你保存一个.jsx文件时，Vite 内部的编译器（esbuild）会自动进行以下操作：

输入 (JSX):

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

输出 (底层 JS):

// 这才是浏览器真正执行的代码
_jsx("div", { id: "box", children: "Hello" });

JSX 的核心语法规则

要在.jsx文件里写好代码，必须遵守这 4 条“铁律”：

① 只能有一个根元素

如果你想返回多个标签，必须把它们包在一个父元素里，或者使用空标签 <></>。

return (
  <>
    <h1>标题</h1>
    <p>内容</p>
  </>
)

② 使用大括号 { } 插入 JS 变量

在大括号里，你可以写任何有返回值的 JS 表达式（变量、函数调用、算术运算）。

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

③ 驼峰命名属性

因为 JSX 本质是 JS，而 JS 对关键字（如 class）有限制，所以：

class 写作 className

for 写作 htmlFor

onclick 写作 onClick

④ 必须闭合标签

即使是没有内容的标签，也必须闭合。

<img src="logo.png" />  // ✅ 必须加最后的斜杠
<br />                  // ✅ 必须闭合

JSX 中的条件与列表

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

条件渲染：使用三元运算符? :或逻辑与 &&。

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

列表渲染：使用数组的 .map() 方法。

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

小结

在处理逻辑、算法、数据格式化，使用 JS。

在处理页面、组件、标签布局，使用 JSX。

到此这篇关于jsx和js区别深度对比分析的文章就介绍到这了,更多相关jsx和js区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论