javascript - 使用 .js 和 .jsx 作为 Reactjs 的文件结尾有什么区别？

Question

这个问题在这里已经有了答案:





ReactJS - .JS vs .JSX

(8 个回答)


2年前关闭。




我想了解用 .js 和 .jsx 结束 Reactjs 文件的区别？
我知道 JS 是标准的 javascript，而 JSX 是我们用来创建 React 组件的类似 HTML 的语法。
但是我确实看到，如果我使用 JSX 语法编写 React 组件并以 .js 或 .jsx 结束文件名，它们都可以工作(似乎是相同的方式)。
那么用 .js 和 .jsx 保存 React 文件有什么区别呢？
它会影响性能吗？
有些事情不会以一种方式起作用吗？

Answer 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>;