导入 React 是如何让 JSX 作为 JS 处理的？答案

【问题标题】：How does importing React allow JSX to be processed as JS?导入 React 是如何让 JSX 作为 JS 处理的？
【发布时间】：2018-08-16 23:45:11
【问题描述】：

我正在使用 create-react-app 学习 React，并且我了解如何使用 JSX 制作组件。例如一个简单的无状态组件是这样的：

import React from 'react';

const Widget = (props) => <h1>{props.text}</h1>

export default Widget;

所以导入 React 使用 createElement() 来转换看起来像 HTML 的 JSX (<h1>{props.text}</h1>)，但是这个函数是如何应用的呢？这不像我明确地将 React 用于任何事情。如果在构建应用程序时进行某种编译，那么为什么需要导入 React？

【问题讨论】：

【解决方案1】：

首先，Babel 将 JSX 编译成常规的 Javascript，然后你的 React 导入，更准确地说是 React.createElement 函数完成这项工作。这是您的代码的编译版本：

"use strict";

var Widget = function Widget(props) {
  return React.createElement(
    "h1",
    null,
    props.text
  );
};

【讨论】：

【解决方案2】：

导入 React 不会将 JSX 转换为 HTML；巴别塔就是这样做的。 Babel 是一个 JavaScript 编译器。

巴别塔有效转身

// Display a "Like" <button>
return (
  <button onClick={() => this.setState({ liked: true })}>
    Like
  </button>
);

进入

// Display a "Like" <button>
return React.createElement(
  'button',
  { onClick: () => this.setState({ liked: true }) },
  'Like'
);

阅读 React 文档Add JSX to a Project 了解更多信息。

【讨论】：