react ...传递变量_React v17.0的6大变化

react ...传递变量

On August 10, React published their first release candidate for React v17. Even though it’s almost three years since a major release of React, surprisingly, there are no new features added for the new version. According to the React team, that’s to make it easier for the developer community to update React. But according to the React team, they are working on some new updates for the later versions of v17.

8月10日，React发布了他们的第一个React v17候选版本。 尽管距React的主要版本已经快三年了，但令人惊讶的是，新版本没有添加任何新功能。 根据React团队的说法，这是为了使开发人员社区更容易更新React。 但是据React团队称，他们正在为v17的更高版本进行一些新更新。

As we know, upgrading from v15 to v16 or v16 to v17 will not cause many problems in our code. But if your codebase was written a few years back, this may cause problems. The good news is that React teams assure us that migrations will get easier in the future versions, even from older versions of React.

众所周知，从v15升级到v16或从v16升级到v17不会在我们的代码中引起很多问题。 但是，如果您的代码库是几年前编写的，则可能会引起问题。 好消息是，React团队向我们保证，即使是从旧版本的React，迁移也会在将来的版本中变得更加容易。

Even though there are no new features, there are some changes in React v17.0. But they have changes in fewer than 20 components out of 100k components. I am going to discuss some major changes in this article.

即使没有新功能，React v17.0也有一些更改。 但是，它们在10万个组件中只有不到20个组件发生了变化。 我将在本文中讨论一些重大更改。

安装 (Installation)

As usual, installation is straightforward. You can use either npm or yarn to install React v17. Personally, I prefer using yarn instead of npm. But it’s up to you what to choose.

与往常一样，安装非常简单。 您可以使用npm或yarn来安装React v17。 就个人而言，我更喜欢使用yarn而不是npm。 但这取决于您选择什么。

Using npm

使用npm

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

Using yarn

使用纱

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

Also, you can use React via the CDN. What you have to do is add the below code fragment into your index.html file.

另外，您可以通过CDN使用React。 您需要做的是将以下代码片段添加到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>

有哪些变化？ (What Are the Changes?)

1. React将不再在文档级别支持事件处理程序 (1. React will no longer support event handlers at the document level)

This means React attaches event handlers to the root DOM container in the React tree. Because of this change, it is now easy and safer to use other technologies with React apps. Also, it is now easier to manage different React components securely.

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

Photo source: https://reactjs.org/blog/2020/08/10/react-v17-rc.html

图片来源： https : //reactjs.org/blog/2020/08/10/react-v17-rc.html

2.事件系统的变化 (2. Changes in the event system)

• They fixed the issue at onScroll event. The issue was that OnScroll callback on the parent element fires when a children element is scrolled.

  他们在onScroll解决了这个问题 事件。 问题在于，滚动子元素时，父元素上的OnScroll回调会触发。

• onFocus and onBlur events have changed to use with native focusin and focusout events.

  onFocus和onBlur事件已更改为与本机focusin和focusout事件一起使用。

• onClickCapture can be used to capture browser phases.

  onClickCapture可用于捕获浏览器阶段。

3.事件池已删除 (3. Event pooling is removed)

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

The change is because of its inability to increase performance in new browsers. With this change, you will be able to read event fields whenever you need to.

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

4.使用清理效果 (4. Using cleanup for effects)

By this approach, it will clean up all effects before running any next effects.

通过这种方法，它将在运行下一个效果之前清除所有效果。

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

Likewise, in the componentWillUnmount() function, the effect cleanup functions are going to run asynchronously. That means, when the component is unmounting, the cleanup will run after the screen updates(cool).

同样，在componentWillUnmount() 函数，效果清除功能将异步运行。 这意味着，在卸载组件时，清理将在屏幕更新(冷)之后运行。

5.附加错误，返回“ undefined” (5. Errors were attached for returning ‘undefined’)

In the previous version of React, when we return undefined, it was always an error. But that was only for function components and classes. In React v17, there’s checking for forwardRef and memo components too, since they have missed it previously.

在早期版本的React中，当我们返回undefined ，总是一个错误。 但这仅适用于功能组件和类。 在React v17中，还检查了forwardRef和memo组件，因为它们以前已经错过了。

6.取消私人出口的方法 (6. Methods of removing private exports)

Previously, React internals were exposed to other projects using private exports. But now those private exports were removed by the React team. With the new version, older versions of React native for web is not compatible. Actually, “React native for web” was the only project which used private exports. With this change, they also moved to different approaches, and now they do not depend on private exports.

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

结论 (Conclusion)

Other than these major changes, the React team has improved the memory usage of React apps and fixed a lot of bugs which we found in v16 and below. Please note that this version is still young and it may contain more bugs than previous, stable releases. So it’s better not to migrate your current projects and deploy them to production until a stable version releases.

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

For more details, please follow the React v17 official documentation.

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

Thanks for reading!

谢谢阅读！

翻译自: https://medium.com/better-programming/the-6-major-changes-in-react-v17-0-d14fed5b0529

react ...传递变量