ReactJS 如何评估 JSX 中的任何 JavaScript 表达式？

Question

ReactJS 文档对他们的 JSX 的功能做了一些有趣且强大的说明：

你可以在 JSX 中嵌入任何 JavaScript 表达式，方法是用 curly 包裹它 大括号。例如，2 + 2、user.firstName 和 formatName(user) 都是有效的表达式。

https://reactjs.org/docs/introducing-jsx.html#embedding-expressions-in-jsx

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

Q1)ReactJS如何实现读取JSX内部的any JS Expression？

Q2) 他们在后台使用 eval() 吗？

Answer 1

JSX 是 a Babel plugin，它会提前转换您的源代码，而不是在运行时。
理解这一点让我们了解Yuri's answer is correct 的原因，以及 JSX 如何评估任意表达式。

作为一个简短的前缀，Babel 是一个常用的 Javascript 编译器，根据您的配置，它允许您做许多有用的事情。一个非常常见的例子是转译 ES6 特性，以便代码可以在 ES5 环境中使用：

代码在：

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

代码输出：

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

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

From their own demo，代码在：

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

代码输出：

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

理解了这一点，现在很容易看出 1) 任何表达式都可以使用，因为表达式根本不被计算；和 2) eval 根本不需要 — 代码已提前转换。

Answer 2

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

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

变成了一个调用React.createElement的函数

function () {
  return React.createElement(
    "div",
    null,
    2 + 2
  );
};