在React中使用JSX有什么好处？

Question

试图学习React,在他们的官方文档中有一节说明:

"大多数React开发人员使用一种称为JSX的特殊语法,这使得编写这些结构变得更容易."

然后我检查给定的例子:

React.createElement(
  "div",
  { className: "shopping-list" },
  React.createElement(
    "h1",
    null,
    "Shopping List for ",
    props.name
  ),
  React.createElement(
    "ul",
    null,
    React.createElement(
      "li",
      null,
      "Instagram"
    ),
    React.createElement(
      "li",
      null,
      "WhatsApp"
    ),
    React.createElement(
      "li",
      null,
      "Oculus"
    )
  )
);

29行和470个字符.如何优先使用10行和170个字符的普通常规HTML结构.

<div className="shopping-list">
  <h1>
    Shopping List for {props.name}
  </h1>
  <ul>
    <li>Instagram</li>
    <li>WhatsApp</li>
    <li>Oculus</li>
  </ul>
</div>

JSX版本似乎更复杂,包含所有逗号和引号.是不是因为html的结束标签？

Answer 1

我觉得你误解了什么是JSX.

来自React doc:

const element = <h1>Hello, world!</h1>;

这个有趣的标签语法既不是字符串也不是HTML ......它被称为JSX.

换句话说,JSX就像HTML.编写代码而不是纯Javascript更容易:

const element = React.createElement(
  'h1',
  'Hello, world!'
);