ReactJ如何评估JSX内的任何JavaScript表达式

Question

reactjs文档对他们的JSX的能力说明了有趣而有力的内容：

您可以通过将其包裹在卷曲中嵌入JSX中的任何JavaScript表达式 牙套。例如，2 + 2，user.firstName和formatName(user)都是有效的表达式。

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

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

Q1( reactj如何实现JSX中的任何 JS表达式？

Q2(他们是否在引擎盖下使用eval((？

Answer 1

JSX是一个通用插件了解这一点使我们可以看到Yuri的答案是正确的原因，以及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一起使用(。

从他们自己的演示中，代码：

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