javascript - TS 配置 JSX：ReactJSX 與 React

在使用 TypeScript 與 React 時，我們必須在 tsconfig.json 文件的 compilerOptions 中指定 jsx。

它有 preserve、react、react-native、react-jsx 等作為允許的值。

{
  "compilerOptions": {
    "jsx": "react-jsx" | "react" | "react-native" | "preserve"
  }
}

react 和 react-jsx 主要用於網頁，我想了解這兩個選項之間的差異以及何時應該選擇哪一個

react 將 jsx 轉換為 React.createElement()

react-jsx 將 jsx 轉換為 _jsx() 和 _jsxs()

另外，_jsx() 和 _jsxs() 有什麼區別？

答案＃1

最好使用 react-jsx，解釋如下：

兩者之間的差異

首先，請記住，這個選項只控制 JSX 組件在 JavaScript 文件中的輸出方式。這僅影響從 .tsx 文件開始的 JS 文件的輸出。

所以，兩者之間的差別只是 JS 文件的輸出。

從 TypeScript 文件輸出 JS 文件：

預設值："react"

import React from 'react';
export const HelloWorld = () => React.createElement("h1", null, "Hello world");

React 17 轉換："react-jsx"

import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
export const HelloWorld = () => _jsx("h1", { children: "Hello world" });

哪個比較好？

正如 React 文件中所寫，從實際角度來看，"react" 選項只是將 JSX 轉換成普通 JavaScript 的舊方法，且並不完美：

• 因為 JSX 被編譯成 React.createElement，如果你使用 JSX，React 就需要在作用域內。
• 有一些性能改進和簡化是 React.createElement 無法實現的。

為了解決這些問題，React 17 為 React 套件引入了新的入口點，這些入口點僅用於像 Babel 和 TypeScript 這樣的編譯器使用。

當你使用 "react-jsx" 選項時，你正在使用這個新的 React 17 編譯方式。

因此，建議使用 "react-jsx" 選項。

_jsx() 和 _jsxs() 之間的區別是什麼？

沒有區別。下面是來自 jsx-runtime 代碼庫的圖片：