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;

上面的代码示例中，return数据不就是JSX吗？我在 return 语句中有 div、按钮和计数器组件。如果我没理解错的话，这些就是JSX。

但是我没有在文件里面导入React。但它仍然编译成功。有人可以帮助我理解这一点。谢谢

Answer 1

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

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

当它编译 jsx 时，它基本上会把 return <div>Hello World!</div> 变成这样的东西：

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

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

Answer 2

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

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

React 无需导入即可工作

React works without importing it

javascript

jsx

reactjs

babeljs