tsconfig中jsx属性'react'与'react-jsx'值的差异及实用优势问询

一、核心编译输出差异 #

• react模式：这是React 17之前的传统JSX编译方式，所有JSX都会被转译成React.createElement调用。比如你写<Button text="Click" />，编译后会变成React.createElement(Button, { text: "Click" })。这种模式下，每个使用JSX的文件都必须手动导入React，哪怕你没直接用到React变量，否则会抛出React is not defined的错误。
• react-jsx模式：这是React 17推出的新JSX转换方案，会把JSX转译成_jsx或_jsxs（针对多子元素的场景）函数调用。同样的<Button text="Click" />，编译后会变成_jsx(Button, { text: "Click" })，这些_jsx函数会自动从react/jsx-runtime导入，完全不需要你手动写import React from 'react'。

二、react-jsx的实际优势 #

• 告别强制导入React：不用再在每个JSX文件顶部写冗余的import React，减少代码噪音，也避免了新手常犯的“忘记导入React导致报错”的问题。
• 打包体积更优：react/jsx-runtime里的_jsx函数做了针对性优化，生成的代码比React.createElement更精简，能有效降低最终打包后的文件大小。
• 更精准的调试体验：开发模式下对应的react-jsxdev会注入额外的调试元数据，React给出的错误提示会更精准，比如能直接指出哪个JSX元素出了问题，定位bug更快。
• 适配React未来特性：React官方后续的新功能都会基于这套新的JSX转换开发，使用react-jsx能无缝兼容未来的版本更新，不用再担心因编译模式落后导致的兼容性问题。

内容的提问来源于stack exchange，提问作者Akshay Vijay Jain