新的JSX变换

尽管REACTION 17不包含新特性，但它将为新版本的JSX转换提供支持。在这篇文章中，我们将描述它是什么，以及如何尝试它。

浏览器不能开箱即用地理解JSX，因此大多数Reaction用户依赖像Babel或TypeScript这样的编译器将JSX代码转换成常规的JavaScript。许多预配置的工具包，如create reaction App或Next.js，也在幕后包含一个JSX转换。

随着REACTION 17的发布，我们一直想对JSX转换做一些改进，但是我们不想破坏现有的设置。这就是为什么我们与Babel合作，为想要升级的人提供新的、重写的JSX转换版本。

它将支持未来的改进，减少您需要学习的概念的数量。

此升级不会更改JSX语法，也不是必需的。旧的JSX转换将照常工作，并且没有计划取消对它的支持。

REACTION 17RC已经包含了对新转换的支持，所以您可以试一试！为了更容易采用，在Reaction 17发布后，我们还计划支持其对Reaction 16.x、Reaction 15.x和Reaction 0.14.x的支持。您可以在下面找到不同工具的升级说明。

现在让我们仔细看看新旧变换之间的区别。

当您使用JSX时，编译器会将其转换为浏览器可以理解的Reaction函数调用。旧的JSX转换将JSX转换为React.createElement(...)。打电话。

您的源代码不需要以任何方式更改。我们将描述JSX转换如何将JSX源代码转换为浏览器可以理解的JavaScript代码。

因为JSX编译成React.createElement，所以如果使用JSX，Reaction需要在作用域内。

为了解决这些问题，REACTION 17在REACTION包中引入了两个新的入口点，这两个入口点仅供Babel和TypeScript等编译器使用。新的JSX转换不是将JSX转换为React.createElement，而是自动从React包中的那些新入口点导入特殊函数并调用它们。例如,。

//由编译器插入(不要自己导入！)。从'；Reaction/JSX-Runtime'；；函数App(){return_jsx('；h1'；，{Child：'；Hello world'；})；}导入{jsx as_jsx}。

请注意，我们的原始代码如何不再需要导入、反应就可以使用JSX！(但我们仍然需要导入REACTION才能使用钩子或REACTION提供的其他导出。)。

此更改与所有现有JSX代码完全兼容，因此您不必更改组件。如果您很好奇，可以查看技术RFC，了解有关新转换如何工作的更多详细信息。

REACT/jsx-run和react/jsx-dev-time内的函数只能由编译器转换使用。如果需要在代码中手动创建元素，则应该继续使用React.createElement。它将继续发挥作用，不会消失。

如果您还没有准备好升级到新的JSX转换，或者您正在将JSX用于另一个库，请不要担心。旧的转换将不会被删除，并将继续受到支持。

支持新转换的Reaction版本(目前，只有REACTION 17RC支持它，但在REACTION 17.0发布之后，我们计划为0.14.x、15.x和16.x提供更多兼容版本)。

由于新的JSX转换不要求Reaction在作用域内，我们还准备了一个自动化脚本，该脚本将从您的代码库中删除不必要的导入。

Create Reaction App支持已经添加，并将在即将发布的V4.0版本中提供，该版本目前处于测试阶段。

如果在升级到RESPECT 17.0.0-rc.2之后收到此Gatsby错误，请运行NPM update来修复它。

目前，旧的转换("；运行时"；："；经典"；)是默认选项。要启用新转换，您可以将{"；runtime"；："；Automatic"；}作为选项传递给@babel/plugin-Transform-reaction-jsx或@babel/preset-action：

从Babel 8开始，Automatic"；将成为这两个插件的默认运行时。有关更多信息，请查看@babel/plugin-Transform-reaction-jsx和@babel/preset-action的Babel文档。

如果将JSX与Reaction以外的库一起使用，则可以使用import Source选项从该库导入-只要它提供了必要的入口点。或者，您可以继续使用将继续支持的经典转换。

如果您正在使用eslint-plugin-react，那么不再需要REACT/jsx-use-react和REACT/REACT-in-JSX-Scope规则，可以将其关闭或删除。

因为新的JSX转换将自动导入必要的REACT/JSX运行时函数，所以当您使用JSX时，REACT将不再需要在作用域中。这可能会导致代码中未使用的Reaction导入。保留它们不会有什么坏处，但是如果您想要删除它们，我们建议您运行一个“codemod”脚本来自动删除它们：

如果您在运行codemod时遇到错误，那么当npx act-codemod update-action-Imports要求您选择一个时，请尝试指定一个不同的JavaScript方言。特别是，即使您不使用Flow，“JavaScript with flow”设置也支持比“JavaScript”设置更新的语法。如果您遇到问题，请将问题归档。

请记住，代码解调输出并不总是与项目的编码样式匹配，因此您可能希望在代码解调完成后运行得更漂亮，以获得一致的格式。

作为升级到新的JSX转换的结果，删除所有未使用的Reaction导入。

将所有默认Reaction导入(即IMPORT REACT FROM"；REACT&34；)更改为非结构化命名导入(例如。从"；REACT"；导入{useState})，这是未来的首选样式。该代码不会影响现有的名称空间导入(即import*as reaction from"；react"；)，这也是一种有效的样式。默认进口将在反应17中继续发挥作用，但从长远来看，我们鼓励远离它们。

如果您使用来自Reaction的其他导入(例如，Hook)，则代码解析器会将其转换为命名导入。

从'；Reaction'；；函数App()导入{useState}；{const[text，useText]=useState('；Hello World'；)；返回{text}；}。

除了清理未使用的导入之外，这还将帮助您为未来的主要版本Reaction(不是Reaction 17)做准备，该版本将支持ES模块，并且没有默认导出。

我们要感谢Babel、TypeScript、Create Reaction App、Next.js、Gatsby、ESLint和Flow Maintainers帮助实现和集成新的JSX转换。我们也要感谢Reaction社区对相关技术RFC的反馈和讨论。