javascript - JSX 代表什么？

Question

JSX 代表什么？

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

Answer 1

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

JSX is a XML-like syntax extension to ECMAScript without any defined semantics

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

JSX is a preprocessor step that adds XML syntax to JavaScript. You can definitely use React without JSX but JSX makes React a lot more elegant.

Just like XML, JSX tags have a tag name, attributes, and children. If an attribute value is enclosed in quotes, the value is a string. Otherwise, wrap the value in braces and the value is the enclosed JavaScript expression.

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

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

如您所见，JSX 只允许您使用类似 XML 的标记语法，代表 React 中的组件和元素。它被转换为纯 JavaScript:

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

您可以阅读更多at the docs .