A mixture of support

The main change in React 17 is still to support incremental change. You can use React17 in one application and React 18 in another.

const rootNode = document.getElementById('root');
ReactDOM.render(<AppReact17 />, rootNode);

const rootNode2 = document.getElementById('root2');
ReactDOM.render(<AppReact18 />, rootNode);
Copy the code

React officially has to support this usage, and presumably the changes to Act18 will be so huge that they won’t even be compatible with the old ones.

Change the event delegate

The react event system is mounted on document. In order to support mixed use, the react event system will be modified to the rootNode you mount. This will cause some problems, such as e.topPropagation (). Right now it only blocks rootnodes, but most of the time it doesn’t matter.

The Portals event will continue to be monitored, as well as minor updates

  • The onScroll event is no longer bubbling to prevent some 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
  • Remove event pooling, which on current browsers does not improve performance and can cause headaches by reusing event objects.
  • The bottom layer of the Focus event is switched to FocusIn, with no change in behavior.

Overall, this change will make the React event tree more dom compliant, although it will result in a number of unusable interview questions.

UseEffect callback changed to asynchronous invocation

The useEffect side effect cleanup function is executed immediately after effect execution, but it has been found that if the operation in the callback is time-consuming, it can cause some performance issues, now useEffect side effect cleanup function is executed after render.

A demo was provided to show the possible problems, and we don’t usually use it that way. In special cases, useLayoutEffect can be used instead.

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

Returns a consistent undefined error

Previously, React only performed this action on the class and function components, but didn’t check the return value of the forwardRef and Memo components. Now all checks, don’t write weird code is not going to die. It is best to use return NULL instead.

Look ahead to 18

React has been tantalizing for four years, ever since Seb introduced fiber architecture in 2016. React16 rewrote the React rendering engine until the recent release of 17, and it looks like the Async Component is finally ready to be released. There are hooks these years, but still no Fiber to get excited about

Fiber is still primarily used to address CPU and network issues, which have always been the most frustrating aspects of the front-end development experience, with one causing stalling and the other causing a blank screen. React introduces two new concepts for the front end.

Time Slicing Time slices

Time sharding takes advantage of Fiber’s interruptible, continuable feature, which allows a portion of each rendering cycle to respond to user input or other IO state changes.

  • React does not block the current thread when rendering
  • If your device is fast enough, you will feel that the rendering is synchronized
  • If your device is very slow, you feel sensitive
  • It’s asynchronous, but you’ll see the entire render, not a component rendered line by line
  • The same way you write components

Suspense

// This is not a Promise. Suspense This is a special object that supports Suspense.
const resource = fetchProfileData();


function ProfileDetails() {
  // Attempt to read user information, although the data may not have been loaded
  const user = resource.user.read();
  return <h1>{user.name}</h1>;
}

function ProfileTimeline() {
  // Try to read the blog data, although the data may not be loaded completely
  const posts = resource.posts.read();  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.text}</li>
      ))}
    </ul>
  );
}


function ProfilePage() {
  return (
    <Suspense fallback={<h1>Loading profile...</h1>} ><ProfileDetails />
      <Suspense fallback={<h1>Loading posts...</h1>} ><ProfileTimeline />
      </Suspense>
    </Suspense>
  );
}
Copy the code

** React has expanded the boundaries of the entire front end, and there will be a lot of issues with the release of react, such as antD animations that will definitely crash. However, the default performance boost can give performance bonuses to many middle and back ends, and many projects don’t actually have the opportunity to fine-tune in the end. Suspense will also change our paradigms for front-end code writing.

Reference documentation

Reactjs.org/blog/2020/0… Reactjs.org/blog/2018/0… Github.com/acdlite/rea… Zh-hans.reactjs.org/docs/concur…