Question

尝试学习React，并在其官方文档中有一节说明：

＆＃34;大多数React开发人员使用一种名为JSX的特殊语法，这样可以更容易地编写这些结构。＆＃34;

然后我查看给定的例子：

SpannableStringBuilder SpannableBuilder = new SpannableStringBuilder();
SpannableBuilder.append("1");
SpannableBuilder.setSpan(CharacterStyle.wrap(HighlightStyle), 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
SpannableBuilder.append("2");
SpannableBuilder.setSpan(CharacterStyle.wrap(HighlightStyle), 1, 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
SpannableBuilder.append("3");
SpannableBuilder.append("4");
SpannableBuilder.setSpan(CharacterStyle.wrap(HighlightStyle), 3, 4, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

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

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"
    )
  )
);

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!'
);

Answer 2

这里的问题是代码重用。这个例子有点简单但是当你面对复杂的情况时，你将有机会重用代码。

const Media = <li>{props.value}</li>;

由于这个组成部分：

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

您可以重复使用已定义的组件。

另一方面，在JSX中，您需要使用javascript一起编写HTML。这不是所希望的，因为视图和代码是在同一个JSX文件中提供的。

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

2 个答案: