TS配置 JSX: ReactJSX vs React.

Question

在使用Typescript和React时，我们需要在tsconfig.json文件的compilerOptions中指定jsx。

可以使用preserve、react、react-native、react-jsx等值。

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

react和react-jsx主要用于Web开发。 我想了解这两个选项之间的区别，以及在何时选择哪一个。

react将jsx转换为React.createElement()

react-jsx将jsx转换为_jsx()和_jsxs()

此外，_jsx()和_jsxs()之间有什么区别？

- Rahul Yadav

---

你需要为react-jsx使用新的转换器，因此有一个最低版本要求：https://reactjs.org/blog/2020/10/20/react-v17.html。旧的转换器仍然可以正常工作。除此之外，我不确定你在问什么。 - jonrsharpe

这是一个好问题。仍然希望看到完整的答案。 - John Hatton

@JohnHatton 现在你有了 :) - Erick Willian

Answer 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代码库的图像：

- Erick Willian