[译]React v17.0的6大变化

The 6 Major Changes in React v17.0

8月10日，React发布了React v17的第一个RC版本，令人惊讶的是，即使从React的主要正式版本发布已经过去了三年，新版本也没有添加任何新功能。根据React团队的说法，这是为了使开发人员更容易更新React。但是React团队称，他们正在为v17之后的版本进行一些新改变。

正如我们所知，从v15升级到v16或从v16升级到v17不会在我们的代码中产生很多问题。但是，如果您的代码库是几年前编写的，则可能会导致问题。好消息是，React团队向我们保证，未来版本中，迁移会变得更加容易，即使是从比较旧的版本中进行迁移。

尽管没有新增特性，但在React v17.0中也有一些小的变化。

安装

可以使用npm或yarn来安装React v17，我更喜欢使用yarn而不是npm。

npm install react@17.0.0-rc.0 react-dom@17.0.0-rc.0

或者

yarn add react@17.0.0-rc.0 react-dom@17.0.0-rc.0

另外，还可以通过引入CDN，将以下代码片段添加到index.html文件中即可

<script crossorigin src="https://unpkg.com/react@17.0.0-rc.0/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17.0.0-rc.0/umd/react-dom.production.min.js"></script>

更新

1.React事件将不再挂载在`document`上

这意味着，事件处理将会直接附加到React树中的DOM容器上，由于此更改，现在可以在React应用程序中轻松使用其他技术，并且更加安全。而且，现在更容易安全地管理不同的React组件。

图片来源

2.事件系统的相关更新

解决了onScroll事件的问题。问题在于，当滚动子元素时，父元素上的OnScroll回调会触发。 - onFocus和onBlur事件更改为使用原生focusin和focusout事件。
onClickCapture使用浏览器捕获监听器。

3.删除事件池

function handleChange(e) {
  setData(data => ({
    ...data,
    //Here app crashes in React 16 and earlier:
    text: e.target.value
  }));
}

这一变化是因为它无法在新浏览器中提高性能，进行此更改后，将可以随时读取事件字段。

4.清理操作异步执行

通过这种方法，将异步清除所有副作用。

useEffect(() => {
  // effect
  return () => {    
        // Cleanup.  
    };
});

同样，在componentWillUnmount()函数中，清理函数将异步运行。这意味着，当组件卸载时，清理将在屏幕更新之后运行(酷)。

5.返回undefined时统一错误输出

在以前的React版本中，当我们返回undefined时，总是会产生错误，但是只针对class和函数组件进行检查。在React v17中，同样也对forwardRef和memo组件检查。

6.移除私有`exports`

以前，React的内部组件通过private exports暴露给其他项目使用,但是现在这些私有导出被React团队删除了。在新版React中，React native for web旧版本将不再兼容。实际上，React native for web是唯一一个使用私有导出的项目。随着这一变化，他们也转向了不同的方法，现在它们不再依赖私有导出。

总结

除了这些重大更改之外，React团队还改进了React应用程序的内存使用，并修复了我们在v16及以下版本中发现的许多错误。请注意，此版本仍处于较新状态，并且与以前的稳定版本相比，它可能包含更多错误。因此，最好不要迁移您当前的项目并将其部署到生产中，直到发布稳定的版本为止。

有关更多详细信息，请查看React v17官方文档。