TS Config JSX：ReactJSX 与 React

Question

在 React 中使用 Typescript 时，我们必须jsx在文件compilerOptions中指定tsconfig.json。

它有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()and_jsxs()

_jsx()还有和之间有什么区别_jsxs()？

Answer 1

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

两者的区别

首先，请记住，此选项仅控制如何在 JavaScript 文件中发出 JSX 构造。这仅影响以 .tsx 文件开头的 JS 文件的输出。

所以，两者的区别只是JS文件的输出。

从Typescript 文档输出 JS 文件：

默认值：“反应”

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