In order to write this article, I consulted Mr. Shakespeare. Study notes are as follows

❤❤❤ (This article is accompanied by a video explaining station B ~) ❤❤❤

I’ll be back with… Etc etc.

React is one of the most popular front-end frameworks of the moment, and it has brought innovative changes with each release. React introduced the virtual DOM, React 16 introduced Fiber, and React 16.8 introduced the refreshing Hooks. However, when it comes to React 17, the rc release log says that the biggest feature of this release is that there are no new features. So far, this is disappointing.

With so many people disappointed with React 17, is there really nothing to talk about? Obviously not, at least I don’t think so, in the long run, both project perspective, and source learning perspective, as a senior reactress, I still have a lot to learn.

First, the React website explains the changes in detail. If you’re a React developer and don’t want to be stuck with the old version forever, and want to learn more about React 17 and how the new version affects your development, here’s how to look at it.

The new JSX transformation

React 17 When JSX is used in React, an error will be reported if JSX is used in React. This is because the old JSX conversion converts JSX to React. The call.

import React from 'react';

export default function App(props) {
  return <div>app </div>;
}
Copy the code

Of course, this isn’t perfect. In addition to the cost of learning, there are also performance optimizations and simplifiesthat cannot be achieved, such as dynamic concatenation of children in createElement and import dependent on React.

React 17 brings a change, allowing us to use JSX alone without introducing React. This is because the new JSX transformation does not convert JSX to React. CreateElement, but instead automatically introduces new entry functions from the React package and calls them. The JSX syntax will not change and the old JSX transformations will continue to work.

2. Change of event delegation

In the React 16 or earlier, will React as entrusted for most events execution of the document. The addEventListener (). When you use React with jQuery, when you click on the input document, events that are not related to React will also be triggered. This is what React expects. But it’s not what users expect.

​

React 17 fixes this problem. Instead of adding events to the document, React adds them to the DOM container at the root of the React tree:

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

This change not only makes it easier for projects that use React partially, but can also be used to scale up projects. For example, when one part uses React 18 and another part uses React 19, events are separated so that they do not affect each other. This is not to encourage you to use multiple React versions in a single project, but rather as an interim process

Well, if you just want to be an ordinary engineer, you can skip to the next little chapter, and if she’s Reactress, keep reading:

Described the changes to the below image, images from the React website react.docschina.org/blog/2020/1…

React has been automatically delegating events since its release. When a DOM event is triggered, React finds out which component is called, and the React event “bubbles” up in the component. This is called event delegation. In addition to the performance benefits on large applications, it makes it easier to add new features like RePlaying Events.

Event delegate, also known as the event broker mechanism, does not bind time handlers directly to real nodes. Instead, it binds all events to the outermost layer of the structure, using a unified event listener and handler. When a component is mounted or unmounted, only objects are inserted or removed from this unified event listener; When an event occurs, it is first handled by the unified event listener, and then the actual event handler is found in the mapping table and called. This simplifies event handling and recycling mechanisms, and improves efficiency.

​

3. Changes related to the event system

In addition to the larger changes to the event delegate, there have been some small changes to the event system,

Unlike in the past, the onScroll event in React 17 no longer bubbles to prevent common confusion.

The React onFocus and onBlur events have been switched to the native FocusIn and FocusOut events underneath. They more closely resemble React’s existing behavior and sometimes provide additional information.

Capture events (for example, onClickCapture) now use capture listeners in the actual browser.

These changes will bring React closer to browser behavior and improve interoperability.

Note:

Although the React 17 underlying has switched the onFocus event from focus to FocusIn, note that this does not affect the bubbling behavior. In React, the onFocus event always bubbles, and will continue to do so in React 17, as it is generally a more useful default. See the Sandbox to learn about adding different checks for different specific use cases.

Remove the event pool

Before React 17, if you wanted to use event e asynchronously, you had to call e.pineist () first. This was because React reused event objects for different events in older browsers to improve performance and set all event fields to null before them. Here’s an example:

function FunctionComponent(props) {
  const [val, setVal] = useState("");

  const handleChange = e= > {
    // setVal(e.target.value);
    
    // React 17 Before React 17, if you wanted to use event e asynchronously, you had to add the following e.pineist () to it
    // e.persist();
    // setVal(data => e.target.value);
  };
  return (
    <div className="border">
      <input type="text" value={val} onChange={handleChange} />
    </div>
  );
}
Copy the code

React 17 removes “event pooling” from the process, which is used to improve performance in older browsers and is no longer necessary for modern browsers. Therefore, e.pineist () is not used in the above code; Can also achieve the desired effect.

Five, side effects cleaning time

React 17 Previously, useEffect and useLayoutEffect cleanup functions both ran synchronously when components were uninstalled, but this wasn’t ideal for large applications because synchronization slowed screen transitions (for example, switching tabs), As a result, the useEffect cleanup function in React 17 executes asynchronously, meaning that if a component is uninstalled, the cleanup will run after a screen update. If you still want to rely on synchronous execution in some cases, use useLayoutEffect.

React 17 uses the useEffect cleanup function asynchronously.

useEffect(() = > {
  someRef.current.someSetupMethod();
  return () = > {
    someRef.current.someCleanupMethod();
  };
});
Copy the code

The problem is that someref. current is mutable, so it might have been set to NULL when the cleanup function was run. The solution is to store the values that change inside the side effects:

useEffect(() = > {
  const instance = someRef.current;
  instance.someSetupMethod();
  return () = > {
    instance.someCleanupMethod();
  };
});
Copy the code

We don’t want this to be a problem, and we provide the ESlint-plugin-react-hooks/Exhaustive deps lint rule (be sure to use it in your project) to warn you of this.

Return consistent undefined error

In React 16 and earlier versions, it is always an error to return undefined. This is expected, but it is not an error when the forwardRef and memo components return undefined due to encoding errors. React 17 fixes this problem. React requires null to be returned if you don’t want to render anything.

Native component stack

In React 17, a different mechanism is used to generate component call stacks, which stitches them together with the regular native JavaScript call stacks. This allows you to get fully symbolic React component call stack information in production.

Remove private exports

React 17 removed some of the React internal components previously exposed to other projects. In particular, React Native for The Web used to rely on some internal component of the event system, but this dependency was fragile and often broken.

In React 17, these private exports have been removed. React Native for Web is the only project that we know of that uses them, and they’ve already migrated to other methods that don’t rely on those proprietary export functions.

9. Heuristic update algorithm update

React 16 began to replace the Stack Reconciler and began to use Fiber Reconciler, which is based on a heuristic algorithm. So why did this change happen?

React’s killer feature: Virtual DOM

  • React15.x – Stack Reconciler
  • React16 – Fiber Reconciler
  • React17 – Fiber Reconciler (Advanced Edition – Priority Zones)

  1. Why we need Fiber

    For large projects, the component tree will be very large, so the cost of recursive traversal will be very high, which will cause the main thread to be continuously occupied. As a result, the layout, animation and other periodic tasks on the main thread cannot be handled immediately, resulting in visual lag and affecting user experience.

  2. Meaning of task breakdown

    Solve the above problem

  3. Incremental rendering (splitting the render task into chunks and dividing it into multiple frames)

  4. Ability to pause, terminate, and reuse rendering tasks when updating

  5. Assign priority to different types of updates

  6. New basic capabilities in concurrency

  7. More fluid

React 17 updates the heuristic update algorithm. The expirationTime used to mark the update priority of fiber nodes is changed to lanes. The former are normal numbers and the later are 32-bit binaries. This kind of binary lanes can specify several priorities, rather than the previous context Time can only flag one.

In Suspense, the reason for this change is that the expirationTimes model does not meet the requirements for IO operations.

<React.Suspense fallback={<Loading />} ><Content />
</React.Suspense>
Copy the code

🏆 technology project | 6 about the React 17 those things!