JSX 代表啥？

Posted 2023-02-22

【中文标题】JSX 代表啥？

【英文标题】：What does JSX stand for?JSX 代表什么？

【发布时间】：2017-01-20 13:40:13

【问题描述】：

JSX 代表什么？

我指的是 JSX，它被定义为 ECMAScript 的类似 XML 的语法扩展，随着 ReactJS 的日益流行，它变得非常流行。

【问题讨论】：

javascript 可扩展标记语言

【参考方案1】：

根据React Doc ：

const element = <h1>Hello, world!</h1>;

这个有趣的标签语法既不是字符串也不是 html。

叫做JSX，是对JavaScript的语法扩展

JSX 所做的是生成 React “元素”。 但是如何？

在底层，JSX 被名为 Babel 的 JavaScript 编译器编译并转换为 vanilla javascript

这是 React 中使用 JSX 的类组件：

class Hello extends React.Component 
  render() 
    return <div>Bonjour this.props.name</div>;
  


ReactDOM.render(
  <Hello name="momo" />,
  document.getElementById('root')
);

这是没有 JSX 的同一个类组件：

class Hello extends React.Component 
  render() 
    return React.createElement('div', null, `Bonjour $this.props.name`);
  


ReactDOM.render(
  React.createElement(Hello, name: 'momo', null),
  document.getElementById('root')
);

正如你所见，每个 JSX 都只是对 React.createElement() 的调用 所以无论你可以用 JSX 做什么，你都可以用纯 JavaScript 来做。但是为了更简单的代码，最好使用 JSX

【讨论】：

你为什么要回答一个已经被接受的问题？

【参考方案2】：

JSX 代表 JavaScript XML（eXtensible Markup L语言）。

JSX 是 JavaScript 中 语法糖 的例子之一。

语法糖是编程语言中的语法，旨在使事物更易于阅读或表达。

使用 JSX 编写的组件：

const MyComponent = () =>  
  return <div> 
    <p>This is not HTML...!</p> 
    <p>Wait...Is this JavaScript?</p> 
    <p>No, What the hell is this?</p> 
    <p>This is JSX.</p> 
  </div> 
 

如果我们不想使用 JXS，那么上面代码 sn-p 的对应代码将如下所示。

const MyComponent = () =>  
  return React.createElement("div", null, React.createElement("p", null, "This is not HTML...!"), React.createElement("p", null, "Wait...Is this JavaScript?"), React.createElement("p", null, "No, What the hell is this?"), React.createElement("p", null, "This is JSX.")); 
;

阅读更多：

Syntactic sugar - Wikipedia

Introducing JSX – React

【参考方案3】：

JSX 代表具有类似 XML 语法的 Javascript

 eg.
<div>
</div>
or <td>
</td>

与 XML 格式相同，在定义的类中以返回形式

【讨论】：

你为什么要回答一个已经被接受的问题（它的详细程度要高得多）？

【参考方案4】：

JSX - JavaScript 语法扩展 将 XML 语法添加到 JavaScript 的预处理器步骤

【参考方案5】：

JSX 代表 JavaScript XML。使用 React，它是元素和组件的类 XML 代码的扩展。根据 React 文档和您提到的：

JSX 是 ECMAScript 的类似 XML 的语法扩展，没有任何定义的语义

从上面的引用中，您可以看到 JSX 没有定义语义，它只是 JavaScript 的扩展，允许编写类似 XML 的代码以实现简单和优雅，然后您将 JSX 转换为纯 JavaScript 函数调用与React.createElement。根据 React 教程：

JSX 是将 XML 语法添加到 JavaScript 的预处理器步骤。你绝对可以在没有 JSX 的情况下使用 React，但是 JSX 让 React 更加优雅。

就像 XML 一样，JSX 标签也有标签名称、属性和子标签。如果属性值用引号引起来，则该值是一个字符串。否则，将值用大括号括起来，该值就是包含的 JavaScript 表达式。

JSX 中的任何代码都被转换为纯 JavaScript/ECMAScript。考虑一个名为Login 的组件。现在我们用 JSX 渲染它：

<Login foo=... bar=... />

如您所见，JSX 只允许您使用类似 XML 的标签语法，在 React 中表示组件和元素。它被转译成纯 JavaScript：

React.createElement(Login,  foo: ..., bar: ... );

您可以阅读更多at the docs。

【讨论】：

感谢您的详细描述。这绝对是我一直在寻找的答案。

它是由 Facebook 创建的！它是可选的。你也可以将 React 与纯 JS 一起使用。但是 JSX 让生活更轻松

伙计，文档通常不以首字母缩略词的实际含义开头，这很烦人。

【参考方案6】：

JSXJavaScript 代表语法扩展，类似于 XML。您可以在 React 中使用简单的 JSX 语法转换。