Javascript React不导入即可工作

我对import-React语句感到困惑。我知道如果我们需要使用JSX，我们需要从React包导入React

import { Count } from "./components/Count";

// import React, { useState } from "react";
function App() {
  const visiable = true;
  return (
    <div>
      <Count visiable={visiable} />
      {/* <button
        onClick={() => {
 
        }}
      >
        Switch
      </button> */}
    </div>
  );
}

export default App;

从“/components/Count”导入{Count}；
//从“React”导入React，{useState}；
函数App（）{
const visible=true；
返回(
{/*  {
}}
>
转换
*/}
);
}
导出默认应用程序；

在上面的代码示例中，返回数据不是JSX吗？返回语句中有div、button和Counter组件。如果我理解正确，这些是JSX

---

但是我没有在文件中导入React。但它仍然编译成功。请有人帮我理解这一点。谢谢更新：这个答案是基于我以前对JSX的理解。React最近为JSX引入了一种新的编译方式，这使得导入React成为可选的。如果您正在使用新的JSX转换（在当前版本的create react app中默认使用），则此答案不适用，请参阅@kind user的答案

从技术上讲，它可以很好地编译，但不会运行

当它编译jsx时，它基本上变成了类似于返回Hello World编码为类似以下内容：

return React.createElement('div', null, 'Hello World!');

---

它使用React对象，因此如果React不在名称空间中，则只会得到运行时错误。除非。。。您的React对象是一个可在任何地方访问的全局变量。

它工作正常，因为React 17x引入了

JSX转换

-不再需要导入React。JSX将自动转换为javascript

---

更多信息：

这可能是因为您已经在另一个组件或文件中导入了React，因此在最终编译的javascript中，依赖关系是存在的，但您不应该依赖于此，您应该始终声明所有依赖关系。