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-app 中默認使用），則此答案不適用，請參閱 @kind-user 的答案。

從技術上講，它可以很好地編譯，但無法運行。

當它編譯 jsx 時，它基本上把類似return <div>Hello World!</div>東西變成了類似的東西：

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

它使用 React 對象，所以如果 React 不在命名空間中，那么你只會得到運行時錯誤。 除非……你的 React 對象是一個可以在任何地方訪問的全局變量。