TS Config JSX: ReactJSX vs React

Question

在使用类型记录和React时，我们必须在jsx文件中在compilerOptions中指定tsconfig.json。

它有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()有什么区别？

Answer 1

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

​

两者的差异

首先，请记住，此选项仅控制在JavaScript文件中发出JSX结构的方式。这只会影响在.tsx文件中启动的JS文件的输出。

因此，两者之间的区别仅仅是JS文件的输出。

从打字本文件输出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"选项只是将JSX转换为常规javascript的一种旧方法，而这种方式并不完美：

• 因为JSX是编译到React.createElement中的，所以如果使用JSX，就需要在作用域内反应。
• 有些性能改进和简化是React.createElement不允许的。

为了解决这些问题，Resive17在React包中引入了新的入口点，这些入口点只供像Babel和TypeScript这样的编译器使用。

当您使用“React”选项时，您将使用这个新的Reactive17编译。

因此，最好使用“react jsx”选项。