JavaScript 和 JSX 有什么区别？

Question

我对 React 很陌生，我发现大多数教程都在谈论 JSX，我没有学习任何 JSX 语法，但我想知道 React 中 JavaScript 和 JSX 之间的主要用法差异是否仅在类似 HTML 的语法上？或者还有什么需要注意的？

Answer 1

JS 是标准的 javascript，JSX 是一种类似于 HTML 的语法，您可以将其与 React 一起使用，以（理论上）使创建 React 组件更加容易和直观。 As the docs say，唯一的目的是让创建 React 组件更容易......那里没有太多其他东西。如果没有 JSX，使用 JS 语法创建大型、嵌套的 HTML 文档将是一个很大的麻烦； JSX 只是让这个过程变得更容易。

Answer 2

默认情况下，每个 JSX 语法都会转换为 JS 函数调用，即更改为 Javascript。

JSX 有助于编写更简单、更简洁的代码。

例子：

JSX 代码：

const App = () => {
    return <div>Hello world!</div>
}

等效的 JS 代码：

const App = () => {
  return React.createElement("div", null, "Hello world!");
};

您可以查看Babel is a JavaScript compiler.，在预设选项中选择 react 以查看每一行的实际结果。

Answer 3

使用 JSX 编译器，您可以将 JSX 表达式转换为对 React.createElement 的调用。这是一种更方便的方式来实现以前使用内联 HTML 文件作为 SCRIPT 标记所实现的功能，而且实际上还有其他 JSX 编译器未绑定到 React。

为了给你一个清晰的例子，试着看看下面的 JSX 代码，它是通过 Babel 编译成 JS 的：

import React from 'react';

var Foo = React.createClass({
  render() {
    return (
      <div>
        <p>
          Ad postea vocent equidem.
        </p>
      </div>
    );
  }
});

Answer 4

JavaScript 就像任何普通的编程语言一样，没有任何额外的库或框架。它也可以称为纯 JavaScript。

另一方面，JSX 是 JavaScript 中的 语法糖，语法糖是编程语言中的一种语法，旨在使事情更易于阅读或表达。 JSX 主要用于 JavaScript 以及库/框架支持，如 ReactJS 或 ReactNative。

JSX 示例

使用 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

Answer 5

JSX 是对 ECMAScript 的一种类似 XML 的语法扩展，并且根本不需要与 React 绑定。 React 只是转译器，将 JSX 树转换为有效 JavaScript 的引擎。 还有其他像 React 这样的编译器也有 JSX 语法，JSXDom 和 MercuryJSX。 JSX 不符合任何 XML 或 HTML 规范，或者无论如何是 ECMAScript 的一部分，并且是在 Facebook 发明的。

JSX 背后的原因是 Facebook 希望拥有一种语法扩展，开发人员可以通过清晰简洁的规范支持这种语法扩展，并希望最大限度地减少另一种“语言”。

Answer 6

JSX 更适合用 ReactJS 编写 HTML 代码

JS 是普通的 JavaScript