October 20, 2020 by Dan Abramov and Rachel Nabors

Today, we’re officially releasing the React 17 version. The React 17 RC blog post detailed the status of React V17 and its changes from previous versions. This post is a brief summary of this post, so if you’ve already read RC’s post, you can skip the current one.

No new features

What’s unusual about React 17 is that there aren’t any new features that developers can use. Instead, the focus in this release is on how React itself can be updated more easily. In particular, React 17 makes it safer to embed a tree structure in a nested tree structure between two React versions. React 17 is also easier to integrate with other technologies.

Incremental updates

React 17 Supports React incremental updates. When you update React 15 to React 16 (or React 16 to React 17), you may need to update your entire application at once. This works for many apps, but if the project has been updated and iterated for years without an effective maintenance, the overall replacement can be costly. At the same time, it is possible that both React versions exist in the project, which is highly likely to cause problems and accidents.

We worked hard to address these issues in React 17. This means you’ll have more options when React 18 and newer versions come out. The first option is to update the entire App at once as before. But you can also choose to update your App bit by bit. For example, you can migrate most of the functionality to React 18, but you can also keep some of React 17’s features, such as lazy communications or child routing.

This doesn’t mean you have to do incremental updates. For most apps, updating the entire App at once is still the best solution. Even with one version lazily loaded, loading two React versions is not ideal. However, for larger and less well-maintained apps, this option is worth considering, and React 17 keeps it going.

We’ve prepared a demo repository to show how to lazily load a version of React if necessary. This demo uses the React Create App, but it can be generated using similar methods in other tools. We welcome demos that use other tools.

Note:

We had delayed the release of other features before React 17. The main goal of the current release is incremental updates. If it was too hard to update React 17, it will do it.

Changes on the event broker

In order to support incremental updates, we had to make a number of changes in the React event system. React 17 is an important release because of the potentially disruptive nature of these changes. For that you can check out our q&A on stability.

In React 17, React will no longer be tied directly to the Document level event mechanism. It will be bound to React rendered and Dom nodes.

const rootNode = document.getElementById('root');
ReactDOM.render(<App />, rootNode);
Copy the code

In the React 16 and the previous version, will React with the document. The addEventListener () to bind most of the events. 17 will React with the rootNode. AddEventListener () for binding.

We are sure that a number of problems with integrating React and non-React code that have been reported on our issues panel over the years will be resolved.

If you have problems with this change, there is a common way to solve it.

Other ground-breaking changes

The React 17 RC Blog post explains other changes in React 17.

We’ve changed no more than 20 components for these changes out of more than 100,000 lines of code in Facebook, so we hope that most apps will avoid most of the problems in the update process. Please let us know if you encounter problems.

New JSX transformation

React 17 supports new JSX conversions, and we also reverse React 16.14.0, React 15.7.0, and 0.14.10. But note that these are completely optional and you don’t have to use them. The traditional JSX transformation will continue to work, and we have no plans to stop supporting it.

React Native

React Native will have a separate release schedule. We currently expect React 17 to arrive in React Native 0.65, but the exact release number is not confirmed yet, so you can follow up on the discussion of the release in the React Native Community release tracker as usual.

The installation

Install React 17 using NPM

NPM install [email protected] [email protected]Copy the code

Install React 17 using Yarn

Yarn add [email protected] [email protected]Copy the code

We also provide a UMD version of React via THE CDN.

< script crossorigin SRC = "https://unpkg.com/[email protected]/umd/react.production.min.js" > < / script > < script crossorigin SRC = "https://unpkg.com/[email protected]/umd/react-dom.production.min.js" > < / script >Copy the code

Detailed documentation for the installation is available here

The original link