ReactJS如何计算JSX中的任何JavaScript表达式？

ReactJS文档介绍了他们的JSX所能做到的一些有趣而强大的功能：

您可以通过将任何JavaScript表达式包装成卷曲的形式将其嵌入JSX中 支撑。例如，

2+2

、

user.firstName

和

formatName（user）

都是有效的表达式

这对我来说是如此强大和有趣，因为这在AngularJS和EmberJS中都是不可能的。Angular在其标记中使用角度表达式，EmberJS在其标记中使用把手表达式

Q1）ReactJS是如何读取JSX中的任何JS表达式的

---

Q2）他们在发动机罩下使用eval（）吗？

React不会评估任何东西。您只需要看看编译后的代码。JSX只是一个语法扩展，它被转换成由引擎计算的普通旧js

() => <div>{2 + 2}</div>

JSX是提前转换源代码的工具，而不是在运行时转换源代码。
理解这一点可以让我们了解为什么JSX可以计算任意表达式，以及JSX如何计算任意表达式

作为一个简短的前缀，是一个常用的Javascript编译器，根据您的配置，它允许您执行许多有用的操作。一个非常常见的示例是传输ES6功能，以便在ES5环境中使用代码：

代码输入：

[1, 2, 3].map(n => n * 2);

代码输出：

[1, 2, 3].map(function (n) {
  return n * 2;
});

var profile = React.createElement("div", null,
  React.createElement("img", { src: "avatar.png", className: "profile" }),
  React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
);

JSX Babel插件做了类似的事情，它将易读的JSX语法转换为React函数调用（或者其他类似的事情，如果您没有将其用于React）

，代码为：

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

---

理解了这一点，现在很容易看出1）任何表达式都可以使用，因为这些表达式根本不需要求值；2）

eval

完全不是必需的-代码会提前转换。

此响应提供有用和有用的信息，但不会直接回答问题。如果你根据这些问题来回答，它可能会有所改进。@MichaelR我的回答有什么不清楚的地方？React不评估任何内容-回答第一个问题，并使第二个问题变得多余，因为它同样不评估任何内容。顺便说一句，jsx甚至都不是react-Specific，我不能给你一个深入的答案，因为我不是react内部的专家。然而，也许可以通过阅读以下内容来澄清问题：以及巴别塔编译器的链接

React.createElement

接受我认为执行、追加和返回的任意数量的参数。我做了一个快速搜索，但是在分发的React文件中没有

eval

。谢谢你清晰直接的回答。是的，我看到React是如何在Babel插件的帮助下实现的：JSX花括号中的JS表达式被传输到

React.createElement（）

的参数。

var profile = React.createElement("div", null,
  React.createElement("img", { src: "avatar.png", className: "profile" }),
  React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
);