无法弄清楚反应应用程序中js和jsx之间的区别[重复]

Posted 2023-02-21

【中文标题】无法弄清楚反应应用程序中js和jsx之间的区别[重复]

【英文标题】：Unable to figure out difference between js and jsx in react app [duplicate]

【发布时间】：2021-11-10 03:32:55

【问题描述】：

我有使用 npx create-react-app 和默认扩展应用程序创建的 react 项目 is.js ，它的工作方式与我将其转换为 .JSX 时相同。我是 React 的新手，我读过 JSX 更简单，但这里的 js 和 jsx 都是一样的。

【问题讨论】：

这能回答你的问题吗？ ***.com/questions/46169472/reactjs-js-vs-jsx

这能回答你的问题吗？ ReactJS - .JS vs .JSX

【参考方案1】：

您可以将 JSX 视为某种 javascript，它允许您将 html 放入其中。 通常，当您编写这样的 JSX 代码时，它会在后台转换为等效的 javascript 例如

JSX

const Head =  () => (<h1> Hello Wordl </h2>)

Javascript 等效项

const Head = React.createElement('h1', , "Hello world")

React.createElement(tagsorComponent, attriborProps, ArraychildrenComponentOrTagsOfStrings)

第一个参数可以接受一个元素标签或另一个组件作为 React.createElement

第二个参数接受子组件的 prop 或 ids 等属性，

第三个参数接受一串标签或子组件

想象一下，你用 javascript 编写所有东西，你可能有一些看起来像这样的东西

const Pet = () => 
  return React.createElement("div", , [
    React.createElement("h1", , "Luna"),
    React.createElement("h2", , "Dog"),
    React.createElement("h2", , "Havanese"),
  ]);
;

const App = () => 
  return React.createElement("div", , [
    React.createElement("h1", , "Adopt Me!"),
    React.createElement(Pet),
    React.createElement(Pet),
    React.createElement(Pet),
  ]);
;

ReactDOM.render(React.createElement(App), document.getElementById("root"));

但是使用 JSX 你可以简单地这样做

const Pet = (props) => 
  return (
    <div>
      <h1>props.name</h1>
      <h2>props.animal</h2>
      <h2>props.breed</h2>
    </div>
  );
;

const App = () => 
  return (
    <div>
      <h1>Adopt Me!</h1>
      <Pet name="Luna" animal="dog" breed="Havanese" />
      <Pet name="Pepper" animal="bird" breed="Cockatiel" />
      <Pet name="Doink" animal="cat" breed="Mix" />
    </div>
  );
;

render(<App />, document.getElementById("root"));

我认为你会更喜欢 JSX 而不是原始 js 等效

【讨论】：

感谢您的回复，但我的问题是，我在 app.js 文件中编写的代码与您在 jsx 中编写的代码相同，那么如果我的 app.js 具有扩展名 js 和我，为什么它可以工作我在里面写 jsx 语法。

在 app.js 被执行之前，它会被你的 babel.js 或任何转译器转换成纯 JavaScript。所以这不是问题。如果您尝试在浏览器控制台中编写 JSX，它将无法正常工作

Ab 的解释是可靠的。我要补充一点，命名文件以更正确地匹配其语法的好处之一是，它会增加 IDE 以更有意义的方式解析其内容或提供有关正确/错误语法和语义的更有意义的反馈的可能性。例如，如果您采用“.ts”和“.tsx”后缀约定，则鼓励您的 IDE 承担类型脚本支持并提供相应建议。