.JS vs .JSX

在React.js中工作时，有一些事情让我感到非常困惑。

在互联网上有很多使用.js文件和React的例子，但还有很多使用.jsx文件的例子。

我读过关于JSX文件，我的理解是它们只是让你在你的JavaScript中写HTML标记。 但是同样的事情也可以写在JS文件中

那么.js和.jsx之间的实际区别是什么?

276523 次浏览
小开
最佳答案

当涉及到文件扩展名时，没有。你的捆绑器/转译器/任何东西负责解决文件内容的类型。

然而，在决定将什么放入.js或.jsx文件类型时，还有一些其他考虑因素。由于JSX不是标准JavaScript，有人可能会说任何不是“普通”JavaScript的东西都应该有自己的扩展。例如，JSX的.jsx和TypeScript的.ts。

有一个这里有很好的讨论供阅读

小开

JSX标记(<Component/>)显然不是标准的javascript，如果你把它们放在一个裸露的<script>标记中，就没有特殊的意义。因此所有包含它们的React文件都是JSX而不是JS。

按照惯例，React应用程序的入口点通常是.js而不是.jsx，即使它包含React组件。也可以是。jsx。任何其他JSX文件通常都有. JSX扩展名。

在任何情况下，存在模糊性的原因是，最终扩展并不重要，因为转译器乐于咀嚼任何类型的文件，只要它们实际上是JSX。

我的建议是:别担心。

小开

在大多数情况下，它只需要转译器/捆绑器，它可能不会被配置为与JSX文件一起工作，而是与JS一起工作!所以你被迫使用JS文件而不是JSX。

因为react只是一个javascript库，所以你在JSX和JS之间选择没有区别。它们是完全可以互换的!

在某些情况下，用户/开发人员也可能会选择JSX而不是JS，因为代码高亮显示，但大多数较新的编辑器也可以正确地查看JS文件中的react语法。

小开

除了上面提到的JSX标签不是标准的javascript之外，我使用.jsx扩展名的原因是Emmet仍然可以在编辑器中工作——你知道，这个有用的插件可以扩展html代码，例如ul>li

<ul>
<li></li>
</ul>
小开

JSX不是标准的JavaScript，根据Airbnb风格指南“eslint”可以考虑这种模式

// filename: MyComponent.js
function MyComponent() {
return <div />;
}

作为警告，如果您将文件命名为MyComponent。JSX它将通过，除非你编辑eslint规则 你可以查看样式指南在这里

小开

正如其他人提到的，JSX不是一个标准的Javascript扩展。最好基于.js来命名应用程序的入口点，对于其他组件，你可以使用.jsx。

我有一个重要的原因，为什么我使用.JSX为所有组件的文件名。 实际上，在一个有大量代码的大型项目中，如果我们将所有React的组件都设置为.jsx扩展名，那么在整个项目中导航到不同的javascript文件(如helper，中间件等)时会更容易，而且你知道这是一个React组件，而不是其他类型的javascript文件
小开

如前所述，如果你用.jsx或.js创建一个文件，两者没有区别。

我想带来另一个期望，在创建组件时将文件创建为.jsx。

这不是强制性的，而是一种我们可以遵循的架构方法。因此，在大型项目中，我们将组件划分为表示组件或容器组件。简单地说，在容器组件中，我们编写逻辑来获取组件的数据，并使用道具渲染表示组件。在表示组件中，我们通常不编写功能逻辑，表示组件用于表示带有所需道具的UI。

因此，如果你检查JSX在反应文件中的定义。

它说,

 const element = <h1>Hello, world!</h1>;
它被称为JSX，它是JavaScript的一个语法扩展。我们 推荐使用React来描述UI应该是什么样子 喜欢的。JSX可能会让您想起模板语言，但它是附带的

. JavaScript的全部功能 JSX生成React“元素”。而不是人工分离 通过将标记和逻辑放在单独的文件中，React 用称为“组件”的松散耦合单元分离关注点

React不需要使用JSX，但大多数人认为它是一个有用的 在JavaScript代码中使用UI时的视觉辅助。它还 允许React显示更多有用的错误和警告消息

它的意思是，它不是强制性的，但你可以考虑用'来创建表示组件。jsx'，因为它实际上绑定了UI的道具。和容器组件，如.js文件，因为它们包含获取数据的逻辑。

这是创建.jsx或.js文件时可以遵循的约定，在逻辑上和物理上分离代码。

小开

< >强为什么JSX ? React包含了这样一个事实，即呈现逻辑本质上是与其他UI逻辑耦合的:事件如何处理，状态如何随时间变化，以及数据如何准备显示

React没有通过将标记和逻辑放在单独的文件中人为地分离技术，而是使用包含两者的松散耦合单元(称为“组件”)来分离关注点。我们将在后面的部分中回到组件，但如果你还不习惯在JS中放置标记，这篇文章可能会说服你。

React不需要使用JSX，但大多数人发现它在JavaScript代码中使用UI时作为一种视觉辅助很有帮助。它还允许React显示更多有用的错误和警告消息。

更多信息请查看React文档关于JSX。 https://reactjs.org/docs/introducing-jsx.html < / p >
小开

如果你使用.jsx，它将被视为一个react页面，因此它的功能将被扩展自动应用。例如，如果你在.jsx文件.container中使用埃米特，这将创建一个带有className而不是class的div

    <div className="container"></div>

如果你在js文件中应用相同的emmet，你会得到这个:

    <div class="container"></div>

提交答案