React无需导入即可工作

Question

我对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;

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

但是我没有在文件中导入React。但它仍然编译成功。希望有人能帮我理解这一点。感谢

Answer 1

它工作得很好，因为React 17x引入了JSX Transform-将不再需要导入React。JSX将自动转换为javascript。

更多信息：https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

Answer 2

更新：这个答案是基于我对JSX的旧理解。React最近为JSX引入了一种新的编译方式，使导入React成为可选选项。如果您正在使用新的JSX转换(默认情况下在当前版本的create-react应用程序中使用(，则此答案不适用，请参阅@cind用户的答案。

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

当它编译jsx时，它基本上将类似return <div>Hello World!</div>的东西变成类似的东西

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

它使用React对象，所以如果React不在命名空间中，那么你只会得到运行时错误。除非React对象是一个可以在任何地方访问的全局变量。