使用 .js 和 .jsx 作为 Reactjs 的文件结尾有啥区别？ [复制]

Posted 2023-02-21

【中文标题】使用 .js 和 .jsx 作为 Reactjs 的文件结尾有啥区别？ [复制]

【英文标题】：What is the difference using .js and .jsx as file endings for Reactjs? [duplicate]使用 .js 和 .jsx 作为 Reactjs 的文件结尾有什么区别？ [复制]

【发布时间】：2020-11-21 08:14:44

【问题描述】：

我想了解以 .js 和 .jsx 结尾的 Reactjs 文件的区别？

我知道 JS 是标准的 javascript，而 JSX 是我们用来创建 React 组件的类似 html 的语法。

但我确实看到，如果我使用 JSX 语法编写 React 组件并以 .js 或 .jsx 结束文件名，它们都可以工作（似乎是相同的方式）。

那么用 .js 和 .jsx 保存 React 文件有什么区别？

它会影响性能吗？

有些事情不会以一种方式起作用吗？

【问题讨论】：

它们是一样的，一些框架也使用.js来存储react，你如何配置你的编译器使它们不同

【参考方案1】：

好的，所以两者都是文件扩展名，通常用于编写或定义您的 React 组件。随着 React 的发展，它带来了 JSX 语法，开发人员开始在 .jsx 文件中编写他们的组件。在 Babel 转译器的帮助下，JSX 被转译为 JS。

现在有了 Babel 和 Webpack 打包器，您不必担心 .jsx 或 .js。最后，一切都将被捆绑到 JavaScript 中。请记住一件事，Web 浏览器不理解 .jsx 文件或 JSX 语法。最终在浏览器中运行的是 JavaScript。

通常，当您的文件仅包含 JSX 并定义用户界面时，我们使用 .jsx，因此您更容易理解文件实际包含的内容。下面是一个例子，

//profile.jsx
var profile = <div>  
    <img src="avatar.png" className="profile" />  
    <h3>[user.firstName, user.lastName].join(' ')</h3>
</div>;

【参考方案2】：

其中一个区别是，一些代码编辑器会理解您正在处理 JSX 语法，因此他们将能够在处理特定于 React 的代码（如自动完成功能、提前输入等）时提供更多帮助。

这两种类型都适合你:)