Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what are the differences between react16 and react17". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Differences: 1, JSX in React16 will be converted to "React.createElement", but react17 will not; 2, React17 will no longer attach event handlers at the document level in the background, while React16 will; 3, there is an event pool in React16, and React17 removes the event pool.

The operating environment of this tutorial: Windows7 system, react17.0.1 version, Dell G3 computer.

React17 has some improvements over react16:

1. New JSX conversion

React 16 principle

Babel-loader will precompile JSX to React.createElement (...).

React 17 principle

The JSX conversion in React 17 does not convert JSX to React.createElement

Instead, a new entry function is automatically introduced from React's package and called.

In addition, this upgrade will not change the JSX syntax, and the old JSX conversion will continue to work.

Summary

React 17 supports new JSX transformations. We will also support it to React 16.14.0 and 0.14.10.

It's important to note that this is completely selectively enabled, and you don't have to use it.

The previous JSX transformation will continue to exist, and there are no plans to stop supporting it.

2. Event agent changes

In React 17, event handlers will no longer be attached at the document level in the background, events will not be bound to the document object, but will be bound to the rootNode node of each react application, because the rootNode of each application must be different, so multiple versions of react applications can exist safely on the page at the same time without conflicts because of the event binding system. React applications can also be securely nested.

Import React from "react"; import ReactDOM from "react-dom"; import App from ". / App"; ReactDOM.render (, rootNode)

Summary

In React 16 and earlier, React will perform document.addEventListener () on most events.

React 17 will call rootNode.addEventListener () later.

3. Change of event pool (event pooling)

React 17 removes the event pool (event pooling) and no longer requires e.persist (). Now you can get the event object directly in asynchronous events (fallback or timeout, etc.). The operation is more intuitive and not confusing. E.persist () is still available, but it won't have any effect.

In function handleChange (e) {/ / v16, you cannot get e in an asynchronous method, so you need to execute e.persist () / / e.persist () beforehand; setTimeout (()) = > {console.log (e);}, 1000);}

4. Asynchronous execution

React 17 changes the side effect cleanup function (if present) to execute asynchronously, that is, after the browser has finished rendering.

UseEffect (() = > {return () = > {/ / will execute}} after the browser has finished rendering)

5. Behavior of forwardRef and memo components

The behavior of the forwardRef and memo components in React 17 will be consistent with that of regular function components and class components. They report an error when they return undefined.

Const Button = forwardRef (() = > {/ / forgot to write return here, so returned undefined / / React17 will not ignore to detect it, will return err;}); const Button = memo (() = > {/ / forgot to write return here, so return undefined / / React17 will not ignore testing it, will return err;}); this is all for "what's the difference between react16 and react17". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.