我今天分享的是React17中JSX的新特性。本文主要介绍React17中JSX的新特性以及为什么你应该关心它。React17的发布是独一无二的。您几乎不会注意到任何新功能。但是，您可以找到一些对React核心产生重大影响的改进。在这些改进中，JJSX的变化非常明显。本文将讨论对JSX的改进、它们背后的动机，以及每个开发人员在升级到React17之前应该了解的内容。首先，也是最重要的，让我们看看您将从外部体验到的变化。开发人员看得见的变化对React17的肤浅研究肯定会让您不知所措。真正令人兴奋的不是新特性，而是React的编译方式。为了更好地理解这一点，让我们看一下使用旧版本React的组件中JSX的编译代码。在React17之前，您可能会注意到编译版本使用React.createElement，其中React的依赖项应该在范围内可用。这就是为什么你需要在每个组件中首先导入React。现在让我们看看它在React17中是如何工作的。使用React17，您不需要为JSX导入React。我希望这提供了编译版本不需要React导入的线索。如下图所示，React17编译器从react/jsx-runtime导入了一个新的依赖项，用于处理JJSX转换。使用React17的新JSX转换因此，作为开发人员，一旦升级到React17，您就可以从组件代码中删除React导入，如果它只存在于JSX中的话。但这是唯一的变化吗，这重要吗？正如您所注意到的，从外部看效果似乎微不足道。当您的代码库中有更多React组件时，了解整体效果会发挥作用很重要。为了更好地理解影响，让我们看看为什么移除对React.createElement的依赖对JSX很重要。删除createElement的好处首先，总结一下，有几点：减少捆绑文件的大小减少动态属性查询Props、Args和KeyRef相关的改进减少捆绑文件的大小首先，一个可以想到的事情of是：减少打包文件的大小。随着React导入的移除，编译后的包输出的大小会稍微变小。我希望这变得显而易见，因为我们需要删除每个组件中的React导入，编译器将其替换为React中的子模块，如下所示：减少动态属性查找由于React17不再为JSX使用React.createElement，因此不再需要动态属性查找。如前所述，您可以在前端代码库的编译版本中找到它。但是，这里的性能改进非常小，您几乎不会注意到这里的差异。这是因为现代JavaScript引擎大多针对动态属性查询进行了优化。与Props、Args和KeyRef相关的改进好吧，我只是想告诉你，这些改进存在于React17中。但是，这些改进太技术化了，无法详细说明。如果您有兴趣，可以在动机部分的create-element-changes中阅读它们。你需要React17吗？如果你在JSX之外创建动态元素，你仍然需要React.createElement方法。如果你需要在代码中手动创建元素，你应该继续使用React.createElement。还有，你可能会想，我们不是还在用react/jsx-runtime来代替React17的React.createElement的JSX吗，这些问题是不是都解决了？简而言之，是的！当我们查看新的react/jsx-runtime时，引入了一些设计更改以避免React.createElement方法中的瓶颈。引入其中一些更改是为了在未来的体系结构中发展。您可以在详细设计部分下的相同链接create-element-changes中阅读这些内容。链接：https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md#motivation你还应该知道什么？好吧，它只不过是一个弃用通知。在React17JSX更改中，有一些您应该注意的通知。废除“模块模式”组件constFoo=(props)=>{return{onClick(){//...}render(){return
