React 17是独特的。您几乎不会注意到任何新功能。但是，您可以找到对React核心的一些有重大影响的改进。其中，对JSX的更改非常引人注目。
本文将讨论JSX的改进，背后的动机以及每个开发人员在升级到React 17之前应了解的知识。
首先，让我们看看您将从外部经历的变化。
开发人员的可见变化
对React 17进行一次表面检查肯定会让您印象深刻。真正令人兴奋的东西不是新功能，而是React编译的方式。
为了更好地理解这些内容，我们来看一下使用旧版React的组件中JSX的编译代码。
在React 17之前
您可能会注意到编译后的版本使用React.createElement，其中React依赖项在范围中应该可用。这就是为什么您需要在每个组件中首先导入React的原因。
现在让我们看一下它如何与React 17一起工作。
使用React 17，您不需要将React导入JSX
我希望可以提供一个提示，说明编译后的版本不需要React导入。如下图所示，React 17编译器从导入一个新的依赖项react/jsx-runtime，该依赖项处理JSX转换。
带有React 17的新JSX转换
因此，作为开发人员，一旦升级到React 17，就可以从组件代码中删除React导入（如果仅适用于JSX）。
但这是唯一的变化吗？
正如您已经注意到的那样，从外部看，效果似乎无关紧要。
重要的是要了解，当代码库中有更多React组件时，整体效果将是可见的
为了更好地理解其影响，让我们看一下为什么要删除与React.createElementJSX有关的依赖关系。
移除 React.createElement带来的好处
减小包装尺寸
随着React import的移除，编译后的捆绑输出的大小将变得稍小。我希望它变得显而易见，因为我们需要从每个组件中删除React导入，在该组件中编译器将它替换为React中的子模块，如下所示。
import {jsx as _jsx} from 'react/jsx-runtime';
共享组件变得更加容易
听起来可能并不多，但是每当将React组件从React项目共享到Bit.dev或将组件发布到NPM时，您始终需要确保react未将其配置为，dependency而是配置为peerDependency。这样做是为了减小组件的捆绑大小，并防止在不同版本下多次安装React的情况（在应用程序中使用共享组件时）。
React在Bit.dev上共享的组件
减少动态属性查找
由于React 17不再将React.createElement用于JSX，因此无需进行动态属性查找。如前所述，您可以在前端代码库的编译版本中找到它。
但是，此处的性能提升非常小，您几乎不会注意到其中的区别
这是因为现代JavaScript引擎主要针对动态属性查找进行了优化。
那么我们需要带有React 17的React.createElement吗？
React.createElement如果要在JSX之外创建动态元素，则仍然需要该方法。
如果需要在代码中手动创建元素，则应继续使用React.createElement
此外，您可能想知道，我们是否仍在使用react/jsx-runtimeJSX代替React.createElementReact 17，并且这些问题是否已解决？简而言之，是的！
当我们查看新功能时，react/jsx-runtime它将带来一些设计更改，以避免React.createElement方法中出现的瓶颈。引入了其中的一些更改以发展未来的体系结构。
作为开发人员，我还应该知道什么？
好吧，这不过是弃用通知而已。在React 17 JSX的更改中，您应该注意到一些注意事项。
弃用“module pattern”组件
const Foo = (props) => {
return {
onClick() {
//...
}
render() {
return <div onClick={this.onClick.bind(this)} />;
}
}
};
但是，通过执行下面提到的两个更改，升级起来会更容易。
- 使用函数表达式而不是箭头函数。
- 添加一个带有
isReactComponent的prototype，以告知React区分类和函数组件。
结果如下。
function Foo(props) {
return {
onClick() {
//...
}
render() {
return <div onClick={this.onClick.bind(this)} />;
}
}
};
Foo.prototype = { isReactComponent: true};
同样，将有的弃用通知；
- 不赞成使用
defaultProps功能组件。 - 从对象弃用散布密钥。
- 弃用字符串引用（并删除生产模式_owner字段）。
但是，这些警告并不是迁移到React 17的障碍。您也将有时间直到下一个主要版本进行升级。
结论
JSX转换的好消息是它向后兼容，只需很少的更改即可升级到React17。但是我觉得影响可能会更好，因为当前的改进在现实世界中几乎是看不到的。
但是，了解这些改进中的大多数将有助于加快将来的发布速度也很重要。因此，升级到React 17将使您的代码库成为未来的证明。而且您不需要提醒自己将React import保留在JSX文件中。
此外，如果您从旧版本升级，则值得参考弃用声明，以免将来出现麻烦。
网友评论