var = (<div>Rome</div>)这种语法在ReactJS中是如何工作的？

Question

我遇到了一种奇怪的语法，它看起来确实有效，但我不确定是如何工作的。

​

function Person(props) {
  return (
    <div className="person">
      <h1>{props.name}</h1>
      <p>Your Age {props.age}</p>
    </div>
  );
}

var app = (
  <div>
    <Person name="Rank" age="42"/>
    <Person name="Frank" age="22"/>
  </div>
)

console.log(app)

ReactDOM.render(app, document.querySelector('#root'));

​

我不理解的是第二个语法，var app = (..)。

我知道应用程序的内容最终会被React编译器用来生成浏览器可以理解的createElement类代码。我不明白的是赋值给app变量的语法，它甚至不是一个有效的javascript语法。

Answer 1

这里，app是用JSX语法编写的element，您将把它呈现到DOM中。所以，它不是你想的那样的Javascript，但它是一种有效的React语法，在这里就是JSX。

我们将JSX渲染到React中的DOM中。直接使用用JSX编写的element，或者使用component ，它返回一个或多个JSX元素。同样，在您的示例中，如果您使用Person组件而不是app，它将返回一个JSX，您将把它呈现到DOM中。

只需访问official documentation上的JSX简介即可。

Answer 2

Babel会在实际运行代码之前对其进行转换。在这种情况下，babel将使用像babel-plugin-transform-jsx这样的插件来转换这些JSX。

你可以在here上在线试用。

所以，实际上当你写这段代码的时候：

const a = (
  <div>
    asdasd
  </div>
);

巴别塔会把它转换成：

var a = React.createElement(
  "div",
  null,
  "asdasd"
);

您可以看到，每个JSX实际上都只是对React.createElement的调用，并向其传递了一些参数。因为在一遍又一遍地输入React.createElement的时候编写React应用程序是非常低效和令人沮丧的，React的开发者允许我们改用JSX语法。这有助于开发人员更好、更快地工作，但要求代码在运行之前进行转译。