您需要了解的关于React v17 0 Release候选的所有信息

Two years after launching React v16, the React team recently launched the first released candidate of React v17. Surprisingly, it doesn’t have any new features for developers. So what is v17? In this article, I will sum up all the latest changes done in v17.0 compared to the features of React v16.

发布React v16两年后，React团队最近发布了第一个已发布的React v17候选版本。 令人惊讶的是，它没有为开发人员提供任何新功能。 那么什么是v17？ 在本文中，我将总结与React v16的功能相比，v17.0中所做的所有最新更改。

According to the React team, the primary purpose of React v17 is to make upgrading to a higher React version easier. React v17 is also bundled with some significant improvements in connection with the event system and the scheduling. So let me elaborate on how they are going to do it.

根据React团队的说法，React v17的主要目的是使升级到更高版本的React更容易。 React v17还捆绑了事件系统和调度方面的一些重大改进。 因此，让我详细说明他们将如何做。

安装React 17.0.0 (Installation of React 17.0.0)

First things first, developers can install React 17 Release Candidate with npm or yarn by running one of the following commands.

首先，开发人员可以通过运行以下命令之一，使用npm或yarn安装React 17 Release Candidate。

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

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

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

If necessary, you can add the library in the script using the following CDNs of UMD builds of React 17.0.

如有必要，您可以使用以下React 17.0的UMD版本的CDN在脚本中添加库。

<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>

Not much has changed with the newest release of React v17.0. As the React team likes to call it, this is a “stepping stone” update, and it focuses mainly on making React itself easier to upgrade. It also introduces enhanced compatibility with ES6 and browsers.

最新版本的React v17.0并没有太大变化。 正如React团队喜欢的那样，这是“垫脚石”更新，它主要集中在使React本身更容易升级上。 它还引入了与ES6和浏览器的增强兼容性。

甚至代表团 (Even delegation)

Changes to the event delegation mechanism are one of the significant updates that come with the new React version. This helps in nesting of the applications that are using different versions of React easier.

事件委托机制的更改是新React版本随附的重要更新之一。 这有助于更轻松地嵌套使用不同版本的React的应用程序。

Event Delegation in the DOM lets us listen to events on the upper-levels while we are listening to the lower-level elements as well because of the bubbling up of the events. Although this introduces advantages in performance when interacting with larger trees, the event listeners are always attached to the top-level node. This introduces conflict when several versions of reacting are used simultaneously.

由于事件冒泡，因此DOM中的事件委托使我们可以侦听上层的事件，同时也可以侦听下层的元素。 尽管这在与较大的树进行交互时会带来性能上的优势，但事件侦听器始终附加到顶级节点。 同时使用多个版本的React时，这会引起冲突。

This issue is fixed with the new version by attaching the event handlers at the React version’s root DOM container.

通过在React版本的根DOM容器上附加事件处理程序，新版本可以解决此问题。

const rootNode = document.getElementById(‘root’); ReactDOM.render(<App />, rootNode);

Moreover, React 17 allows for gradual updates to React. As the react versions are released, developers can migrate their React apps at the same time as with previous react versions, or update part of their application to gradually complete the migration. The latter option should require the lazy loading of one of the two React versions so that the user experience does not degrade.

此外，React 17允许逐步更新React。 随着React版本的发布，开发人员可以与以前的React版本同时迁移自己的React应用程序，或者更新其应用程序的一部分以逐步完成迁移。 后一个选项应该要求延迟加载两个React版本之一，以便不会降低用户体验。

These changes may reflect the recent trend towards Micro Frontends and independent components. Components that are built and delivered independently (e.g, using tools like Bit) should be able to compose a single frontend app, even when built using different versions of React.

这些变化可能反映了最近朝着微型前端和独立组件的趋势。 独立构建和交付的组件(例如，使用Bit之类的工具)应该能够组成一个前端应用程序，即使使用不同版本的React构建。

Independent React components managed by Bit

由 Bit管理的独立React组件

使用React逐步更新 (Gradual updates with React)

Recent changes introduced by React have also included introducing “deprecations” of older features, which can lead to problems for development teams in implementing these new updates, particularly in large applications.

React引入的最新更改还包括引入了对旧功能的“弃用”，这可能导致开发团队在实施这些新更新时出现问题，尤其是在大型应用程序中。

When upgrading from an older version to the new, you may encounter little problems or none at all if you are just migrating from version 15 to 16 or from 16 to 17. The problems occur when the older version is older than a few years and was not regularly maintained. This means the older application will contain some of the features considered as “deprecated,” too. In large applications, this could lead to huge problems.

从旧版本升级到新版本时，如果仅从版本15迁移到16或从版本16迁移到17，则可能遇到的问题很小或根本没有。没有定期维护。 这意味着较旧的应用程序也将包含一些被视为“已弃用”的功能。 在大型应用中，这可能会导致巨大的问题。

The first edition of React 17, therefore, aims to establish a way of delivering such changes in a less “painful” way. Options are included to upgrade our framework to the latest version selectively, instead of doing it all at once. For example, we will be allowed to retain a particular portion of the code with the previous version while the other sections are modified.

因此，React 17的第一版旨在建立一种以较少“痛苦”的方式传递此类更改的方法。 包含选项，可以有选择地将我们的框架升级到最新版本，而不是一次全部完成。 例如，在修改其他部分的同时，允许我们保留以前版本的代码的特定部分。

We can split the major changes in React17 into two categories as follows.

我们可以将React17中的主要更改分为以下两类。

• Under the Hood Changes — These under the hood changes may not affect how you write your code, but you will have to be aware of these changes.
  底层更改-底层更改可能不会影响您编写代码的方式，但是您必须了解这些更改。
• New updates in coding — These changes may affect how you write your code.
  编码方面的新更新-这些更改可能会影响您编写代码的方式。

内幕下的变化 (Under the Hood Changes)

React.createElement()声明 (React.createElement() declaration)

JSX is just a terser way to write a React.createElement() statement. If a component uses the rendering function, it outputs a React element tree or the DOM HTML elements output. Then React does the changes to the actual DOM based on the react element’s representation and then make the adjustments to the virtual DOM to improve performance.

JSX只是编写React.createElement()语句的更简洁的方式。 如果组件使用渲染功能，则它将输出React元素树或DOM HTML元素输出。 然后，React根据react元素的表示对实际DOM进行更改，然后对虚拟DOM进行调整以提高性能。

Babel is the library that transpires ES6 into ES5 and, as the name indicates, the ReactDOM.render() renders the DOM.

Babel是将ES6转换为ES5的库，顾名思义，ReactDOM.render()呈现DOM。

A special JSX function is provided to replace rendering, initiated with Babel 8. JSX compilation of these new features also automatically imports React when required. You won’t have to use them manually when writing to Babel directly anymore.

提供了一个特殊的JSX功能来替换由Babel 8启动的渲染。这些新功能的JSX编译也会在需要时自动导入React。 直接写入Babel时，您将不必手动使用它们。

For example, consider the following input.

例如，考虑以下输入。

function Compile() { 
   return <div />;
}

This is changed to the below code in the new version.

在新版本中，将其更改为以下代码。

import { jsx as _jsx } from "react/jsx-runtime"; 
function Compile() {
    return _jsx("div", …);
}

React 17中的本机组件堆栈 (Native Component Stacks in React 17)

When an error occurs in the browser, the browser gives us hints with a javascript function; its name, and location stack trace. However, for optimal bug tracking, this information is not enough. We want to know exactly where our error occurred, and this is made possible with the newest version. Component stacks are generated in a different manner in React 17 that stitches them together from the regular native JavaScript stacks. This solution will be more useful, particularly in the production environment.

当浏览器发生错误时，浏览器会通过javascript函数为我们提供提示； 它的名称和位置堆栈跟踪。 但是，对于最佳的错误跟踪，此信息还不够。 我们想确切地知道发生错误的位置，而最新版本可以做到这一点。 组件堆栈是在React 17中以不同的方式生成的，将它们与常规的本机JavaScript堆栈缝合在一起。 该解决方案将更加有用，尤其是在生产环境中。

取消私人出口 (Removal of Private Exports)

React 17 withdrew private exports that were part of the React. This means that the older React Native for Web versions are not compliant with React 17 but are running on the newer versions. The fact that React Native for Web had to release new versions to adapt to internal React changes does not change much in reality.

React 17撤回了属于React的私人出口。 这意味着较早的Web上的本机React Native不兼容React 17，而是在较新的版本上运行。 实际上，React Native for Web必须发布新版本以适应内部React更改这一事实并没有太大改变。

It is important that React’s virtual DOM should produce XML according to HTML5 spec. React 17 has a better XML-compatible support for Web which ensures HTML5 spec passes a HTML5 validator.

React的虚拟DOM必须根据HTML5规范生成XML，这一点很重要。 React 17对Web具有更好的XML兼容支持，可确保HTML5规范通过HTML5验证器。

编码方面的新更新 (New updates in coding)

事件池 (Event Pooling)

React 17 removes “event pooling” optimization from React. What it did was reusing the event object between events and setting all the fields to “null” in-between processes. To use the case properly, you need to call e.persist() or read the property you need beforehand.

React 17从React移除了“事件池”优化。 它所做的是在事件之间重用事件对象，并将进程之间的所有字段设置为“ null”。 为了正确使用该大小写，您需要调用e.persist()或事先阅读所需的属性。

Although this feature was introduced to increase the performance in the old browsers, it caused some issues, and the efficiency of modern browsers is not improved in any way.

尽管引入此功能是为了提高旧版浏览器的性能，但它引起了一些问题，并且现代浏览器的效率没有任何提高。

With React 17 following code would work as expected, no need to use e.persist() method.

使用React 17，以下代码将按预期工作，而无需使用e.persist()方法。

function handleChange(e) { 
  setData(data => ({
     …data,text: e.target.value}));}

useEffect()清理功能 (useEffect() cleanup function)

We can use the useEffect() cleanup function to run asynchronously and more consistently. For example, if the part is unmounted, clean-up will take place after updating the screen.

我们可以使用useEffect()清理函数来异步且更一致地运行。 例如，如果零件已卸下，则将在更新屏幕后进行清理。

useEffect(() => {
    // Here include the effect itself. 
    return () => {
        // Here include its cleanup.
    };
});

在forwardRef和memo组件上返回未定义 (Returning undefined on forwardRef & memo component)

In React 17, the behavior for forwardRef and memo components is consistent with regular function and class components. Returning undefined from them is an error in React 17. If it’s required to render nothing intentionally, then you can return null instead.

在React 17中，forwardRef和memo组件的行为与常规函数和类组件一致。 从它们返回未定义是React 17中的错误。如果需要有意不呈现任何内容，则可以返回null。

let Button = forwardRef(() => {// Since we haven’t specified return statement,this component would returns undefined.// React 17 determine this as an error instead of ignoring it.<button />;});let Button = memo(() => {// Since we haven’t specified return statement,this component would returns undefined.// React 17 determine this as an error instead of ignoring it.<button />;});

新的React生命周期组件方法 (New React lifecycle component methods)

React relies on Async Rendering. Asynchronous rendering of the application takes place piece by piece by the React engine. This is one of the reasons why three methods of the life cycle will be removed in React 17, such as :

React依赖于异步渲染。 应用程序的异步渲染是由React引擎进行的。 这是为什么在React 17中删除生命周期的三种方法的原因之一，例如：

• componentWillReceiveProps
  componentWillReceiveProps
• componentWillMount
  componentWillMount
• componentWillUpdate
  componentWillUpdate

At the same time, two new functions are introduced:

同时，引入了两个新功能：

• getDerivedStateFromProps
  getDerivedStateFromProps
• getSnapshotBeforeUpdate
  getSnapshotBeforeUpdate

They are to replace the old methods and completely cover the scope of their use.

它们将取代旧方法并完全覆盖其使用范围。

工厂组成 (Factory Components)

This will not affect a whole lot of people, as it is not widely used, but during React compilation, factory components that return an object with a render method were supported; that was before Babel.

这不会影响很多人，因为它没有被广泛使用，但是在React编译期间，支持使用render方法返回对象的工厂组件。 那是在通天塔之前。

The option to create factory components in React returns an instance that is not actually required. However, it is a confusing pattern, as it can be used in place of function components that return a template value instead. This feature is also partly responsible for the performance issues React experiences during compilation, so it is being deprecated.

在React中创建工厂组件的选项返回一个实际不需要的实例。 但是，这是一个令人困惑的模式，因为它可以代替返回模板值的功能组件使用。 此功能还部分负责编译期间React遇到的性能问题，因此不建议使用。

function FactoryComponent() {
   return { 
     render() { 
       return <div />; 
     }
   }
}

React组件的属性 (Properties on React Components)

One important thing to note in the latest version of React is its compliance with ES6. As the older version of the JavaScript Standard, ES5 is getting degraded by the day, its newer version, ES6, is introducing more and more add-ons that are syntactic and functional.

在最新版本的React中要注意的一件事是它符合ES6。 随着JavaScript标准的较旧版本的日趋成熟，ES5逐渐退化，其新版本ES6引入了越来越多的语法和功能附加组件。

For instance, KeyCode event is now deprecated as, in reality, it was incomprehensible across different platforms even when its the same deployment. With React version 17, they are suggesting the use of either key or code. If you are using this, you need to add the code property to the keyboard event objects.

例如，现在不赞成使用KeyCode事件，因为实际上，即使在相同的部署中，它在不同的平台上也难以理解。 在React版本17中，他们建议使用密钥或代码。 如果使用此功能，则需要将code属性添加到键盘事件对象。

Among other significant changes, the onScroll event no longer bubbles, onFocus and onBlur events use the native focusin and focusout, capture phase events (e.g., onClickCapture) now use real browser capture, phase listeners. The changes reduce the discrepancies between the DOM events and React synthetic events.

除其他重大更改外，onScroll事件不再冒泡，onFocus和onBlur事件使用本机focusin和focusout，捕获阶段事件(例如onClickCapture)现在使用实际的浏览器捕获，阶段侦听器。 这些更改减少了DOM事件和React合成事件之间的差异。

结论 (Conclusion)

The latest version of React sure does lead the developers to come up with better solutions and stay motivated. What’s more interesting is that React continues to work on their new updates, and as hinted, we can expect more features and enhancements that will make our lives as developers much easier.

最新版本的React肯定会引导开发人员提出更好的解决方案并保持积极性。 更有意思的是，React继续进行新的更新，并暗示，我们可以期待更多的功能和增强功能，这些将使我们作为开发人员的生活更加轻松。

The decision to make react gradually updatable is right on time as organizations are rapidly moving their legacy applications to later versions at present. However, there are more things that need to be improved to stay competitive over Angular and JQuery. If the file size of the React applications is reduced even in the future versions, this would be a huge step in increasing the performance of the React apps.

随着组织正在Swift将其旧版应用程序迁移到更高版本，做出及时更新的决定是正确的。 但是，还有很多事情需要改进，以保持与Angular和JQuery的竞争力。 如果甚至在将来的版本中减小了React应用程序的文件大小，那么这将是提高React应用程序性能的重要一步。

I hope you all will try the latest updates of React and share your experience with us as well. Happy Coding!

希望大家尝试一下React的最新更新，并与我们分享您的经验。 编码愉快！

学到更多 (Learn More)

翻译自: https://blog.bitsrc.io/all-you-need-to-know-about-react-v17-0-release-candidate-9f6d776a8fca