javascript – 即使我没有明确使用React,为什么还需要导入React语句？

我有一个React应用程序,以下是 JavaScript 代码

import React from 'react';
import ReactDOM from 'react-dom';

const App = function(){
  return <div>Hi</div>
}

ReactDOM.render(<App />,document.querySelector('.container'));

HTML文件如下.

<!DOCTYPE html>
<html>
  <head>
    <Meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="/style/style.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css">
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAq06l5RUVfib62IYRQacLc-KAy0XIWAVs"></script>
  </head>
  <body>
    <div class="container"></div>
  </body>
  <script src="/bundle.js"></script>
</html>

我不明白的问题是,如果我从’react’中删除import React,它将显示如下的错误消息.

Uncaught ReferenceError: React is not defined

但我没有在任何地方明确地在我的代码中使用React,为什么它会显示这样的消息.谁能告诉我引擎盖下发生了什么？

更新：
与this one不完全相同的问题,因为我在我的代码中只是一个单独的组件,不涉及任何父组件.

解决方法

使用JSX(< App />)只是React.createElement()的一个合成糖.

因此,当您的代码被转换为纯javascript时,将在那里显示对React的引用,因此您需要导入它.

所以,是的,你正在使用它,虽然你没有看到它

查看您的代码编译为here

'use strict';

var _reactDom = require('react-dom');

var _reactDom2 = _interoprequiredefault(_reactDom);

function _interoprequiredefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var App = function App() {
  return React.createElement(
    'div',null,'Hi'
  );
};

_reactDom2.default.render(React.createElement(App,null),document.querySelector('.container'));

javascript – 即使我没有明确使用React,为什么还需要导入React语句？

解决方法

相关文章