typescript - JSX 模式应该是 react 还是 react-native？

Question

这个问题基于 this TypeScript official documentation :

The react mode will emit React.createElement, does not need to gothrough a JSX transformation before use, and the output will have a.js file extension.

The react-native mode is the equivalent ofpreserve in that it keeps all JSX, but the output will instead have a.js file extension.

但是，我见过的所有教程都有它的 react 模式:

"jsx": "react"

虽然这工作得很好，而且我什至没有看到警告，但我想了解 React Native 如何/为什么编译 TSX并且能够毫无问题地加载它们。
基本上:

为什么要创建 react-native模式，当 React Native 支持 react模式？

使用其中一个是否有任何性能原因？

Answer 1

在 React Native 出现之前，世界是美好而干净的:

| File Extension |  Has JSX Syntax  |  Has Type Annotations  |
--------------------------------------------------------------
|   .tsx         |       Yes        |          Yes           |
|   .ts          |       No         |          Yes           |
|   .jsx         |       Yes        |          No            |
|   .js          |       No         |          No            |

当 TypeScript 看到 .tsx文件，它可以决定是否发出 .jsx文件(在 jsx: preserve 下)或 .js文件(在 jsx: react 下)。无法发出 .js包含 JSX 语法的文件(因为 JSX 不是合法的 JavaScript 语法)。

然后 React Native 说“我们将在 .js 文件中使用 JSX 语法!”，这很奇怪，因为它是非法的，但无论如何。因此，如果您在 TypeScript 中编写 React Native 代码，有时您希望 TS 采用 .tsx输入文件并生成 .js仍然包含 JSX 语法的文件。因此 JSX 模式 react-native出生于。