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