Jsx 如何是有效的 javascript？答案

【问题标题】：How Jsx is valid javascript?Jsx 如何是有效的 javascript？
【发布时间】：2022-01-07 19:11:44
【问题描述】：

我使用 react 和 jsx。我的问题是 jsx 如何是有效的 js 语法？我认为这可能是正确的唯一方法是，react 编译所有文件并将 jsx(s) 转换为有效的 js。就像 C 预处理器对宏所做的那样。是真的吗？如果是真的，我们认为 react 是 js 库对吗？我认为这是一个更高级别的图书馆。

如果不是，是谁做的？

【问题讨论】：

Does this help?
JSX 不是有效的 JavaScript。

标签： javascript reactjs jsx

【解决方案1】：

JSX 只是React.createElement 函数调用的语法糖，由Babel 转译。

作为开发人员，您可能不喜欢 react 元素的创建方式，因此 React 团队提供了 JSX 语法，它非常简单，您可以与 HTML 关联。

没有人阻止你使用React.createElement。但这会让你的代码变得臃肿。

举个例子，你决定使用 Raw React，然后你会得到如下结果。

const list =
  React.createElement('div', {},
    React.createElement('h1', {}, 'My favorite ice cream flavors'),
    React.createElement('ul', {},
      [
        React.createElement('li', { className: 'brown' }, 'Chocolate'),
        React.createElement('li', { className: 'white' }, 'Vanilla'),
        React.createElement('li', { className: 'yellow' }, 'Banana')
      ]
    )
  );

上述代码将按预期工作，但有一些限制：

不可读
不可维护

使用 JSX 语法后，您将不会遇到这些问题，如下所示使用 JSX。

<div>
  <h1>My favorite ice cream flavors</h1>
  <ul>
    <li className="brown">Chocolate</li>
    <li className="white">Vanilla</li>
    <li className="yellow">Banana</li>
  </ul>
</div>

你可以在babeljs.io看到它

如果你的组件是

import "./styles.css";

export default function App() {
  return (
    <div>
      <h1>Hello word</h1>
      <h2>I'm learning React</h2>
    </div>
  );
}

然后它会被转译为

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = App;

require("./styles.css");

function App() {
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "Hello word"), /*#__PURE__*/React.createElement("h2", null, "I'm learning React"));
}

【讨论】：

谢谢。所以实际上使用 jsx 我们不是用 javascript 编写的。那么我们可以将反应视为一个框架吗？因为它似乎是一些简单的 API 之上的东西。它编译我们的文件并翻译它。我说的对吗？
@Redwan：React 和 JSX 是一起开发的，但它们仍然是独立的。 React 不依赖也不需要 JSX。

【解决方案2】：

JSX 是 not 一个有效的 JavaScript。

JSX 类似于 JavaScript。编译器Babel 将 JSX 代码转换为有意义的 JavaScript 代码。使用 JSX 编译器，您可以将 JSX 表达式转换为对React.createElement的调用

JSX：

<p style={{color:'#000', background:'blue'}}>This is JSX</p>

已编译的 JavaScript：

"use strict";

/*#__PURE__*/
React.createElement("p", {
  style: {
    color: '#000',
    background: 'blue'
  }
}, "This is JSX");

你可以一起玩看看运行时编译here

【讨论】：