Shulou(Shulou.com)05/31 Report--

This article mainly introduces "what are the new features of React17". In daily operation, I believe many people have doubts about what the new features of React17 are. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "what are the new features of React17?" Next, please follow the editor to study!

Visible changes for developers

The superficial study of React 17 will certainly not impress you. What's really exciting is not the new features, but the way React compiles.

To better understand this, let's take a look at the compiled code for JSX in components that use older versions of React.

Before React 17

You may notice that the compiled version uses React.createElement, where React dependencies should be available in scope. This is why you need to import React in each component first.

Now let's see how it works in React 17.

With React 17, you don't need to import React for JSX.

I hope this provides a clue that the compiled version does not require the import of React.

As you can see in the following figure, the React 17 compiler imports a new dependency from react/jsx-runtime that handles JJSX transformations.

New JSX Transform with React 17

So, as a developer, once you upgrade to React 17, you can remove the React import from your component's code if it exists only for JSX.

But is that the only change? does it matter?

As you've noticed, the effect doesn't seem to matter from the outside.

It is important to understand that when you have more React components in your code base, the overall effect will show.

To better understand this impact, let's take a look at why it is important for JSX to cancel the dependency with React.createElement.

Benefits of deleting createElement

First of all, to sum up, there are a few points:

Reduce the size of bundled files

Reduce dynamic attribute queries

Improvements related to Props, Args and KeyRef

Reduce the size of bundled files

First of all, one thing you can think of is to reduce the size of the bundled files.

As the React import is removed, the output of your compilation bundle will become slightly smaller. I want this to be obvious because we need to remove the React import in each component where the compiler replaces it with a submodule in React, as follows:

Import {jsx as _ jsx} from 'react/jsx-runtime'; reduces dynamic attribute queries

Because React 17 no longer uses React.createElement for JSX, it eliminates the need for dynamic attribute lookups. As discussed earlier, you can find this in the compiled version of the front-end code base.

However, the performance improvement here is very small, and you will hardly notice the difference here because modern JavaScript engines are mainly optimized for dynamic property queries.

Improvements related to Props, Args and KeyRef

Well, I just want to tell you that these improvements exist in React 17. However, these improvements are too technical to elaborate. If you are interested, you can read them in create-element-changes in the Motivation section.

Do I need to use React17

If you create dynamic elements outside of JSX, you still need the React.createElement method.

If you need to create elements manually in your code, you should continue to use React.createElement.

In addition, you might think, aren't we still using react/jsx-runtime to replace the JSX of React.createElement in React 17, and these problems have been solved there? In short, yes!

When we look at the new react/jsx-runtime, it brings some design changes to avoid bottlenecks in the React.createElement approach.

Some of these changes are introduced in order to develop in the future architecture.

You can read this in the same link create-element-changes under the detailed design section.

What else should you know?

Well, this is nothing else, but a cancellation notice.

Among the changes in React 17 JSX, there are several notifications that you should pay attention to.

Abolish the module mode component const Foo = (props) = > {return {onClick () {/...} render () {return;}

However, it will be easier to upgrade by making the two changes mentioned below.

Use function expressions instead of arrow functions.

Add a prototype with isReactComponent to tell the React area classification and function components

The results look like this.

Function Foo (props) {return {onClick () {/ /...} render () {return;}; Foo.prototype = {isReactComponent: true}

Similarly, there will be the following notice of abandonment.

Deprecate the defaultProps on the function component.

Spreading key in the obsolete object.

Discard the string reference (and delete the production mode _ owner field).

At this point, the study on "what are the new features of React17" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.