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

In this article, the editor introduces in detail "how to use the new feature released of React18". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to use released, the new feature of React18," can help you solve your doubts.

New feature: Automatic Batching

Batch processing means that React groups multiple state updates into a single re-rendering for better performance. In the absence of automatic batch processing, we only batch updates in the React event handler. By default, updates within promises, setTimeout, native event handlers, or any other event are not batch processed in React. When you use automatic batch processing, these updates are automatically batch processed:

/ / Before: only React events were batched.setTimeout (() = > {setCount (c = > c + 1); setFlag (f = >! F); / / React will render twice, once for each state update (no batching)}, 1000); / / After: updates inside of timeouts, promises,// native event handlers or any other event are batched.`setTimeout (() = > {setCount (c = > c + 1); setFlag (f = >! F); / / React will only re-render once at the end (that's batching!)}, 1000) New feature: Transitions

Transitions is a new concept in React to distinguish between urgent and non-urgent updates.

Emergency updates reflect direct interactions such as typing, clicking, pressing, and so on.

Transition updates convert UI from one view to another.

Urgent updates, such as typing, clicking or pressing, require an immediate response to match our intuition about the way physical objects behave. Otherwise, they will feel "wrong". However, the transition is different because the user does not want to see each intermediate value on the screen.

For example, when you select a filter in the drop-down list, you want the filter button itself to respond immediately when clicked. However, the actual results may be converted separately. A small delay is difficult to detect and is often expected. If you change the filter again before the result rendering is complete, you only need to see the latest results.

In general, for the best user experience, a single user input should result in both emergency and non-urgent updates. You can use startTransition API in input events to tell React which updates are urgent and which are "transformations":

Import {startTransition} from 'react';// Urgent: Show what was typedsetInputValue (input); / / Mark any state updates inside as transitionsstartTransition (() = > {/ / Transition: Show the results setSearchQuery (input);})

Updates packaged in startTransition are treated as non-urgent updates and will be interrupted if more urgent updates occur, such as clicks or keystrokes. If a transition is interrupted by the user (for example, by typing multiple characters in succession), React throws out unfinished stale rendering work and renders only the latest updates.

UseTransition: the hook used to start the transition, including the value used to track the pending state.

StartTransition: a way to start a transformation when hooks cannot be used.

The conversion chooses to join concurrent rendering, allowing updates to be interrupted. If the content is suspended again, the transition also tells React to continue displaying the current content while rendering the transition content in the background (see suspense RFC for more information).

See the documentation about the transition here.

New Suspense featur

Suspense allows you to declaratively specify the load status of a part of the component tree if it is not ready to be displayed:

Suspense makes "UI load state" the first declarative concept in the React programming model. This enables us to build a higher level of functionality on top of it.

A few years ago, we launched a limited edition of suspense. However, the only supported use case is to use React.lazy for code splitting, which is not supported at all when rendering on the server.

In React 18, we added support for Suspense on the server and extended its functionality with concurrent rendering.

Suspense in React 18 works best in combination with transitional API. If suspended during conversion, React will prevent content that is already visible from being replaced by fallback. Instead, React delays rendering until enough data is loaded to prevent an incorrect loading state.

New client and server Rendering APIs

In this release, we took this opportunity to redesign the API for rendering on both the client and server. These changes allow users to continue to use the old API in React 17 mode when upgrading to a new API in React 18.

React DOM Client

These new API are now exported from react-dom/client:

CreateRoot: a new method for creating the root to be render or unmount. Use it instead of ReactDOM.render. The new features in React 18 will not work without it.

HydrateRoot: a new way to freeze applications rendered by the server. Use it instead of ReactDOM.hydrate with the new ReactDOM Server API. The new features in React 18 will not work without it.

Both createRoot and hydrateRoot accept a new option called onRecoverableError in case you want to be notified when React recovers from rendering or hydration errors for logging. By default, React uses reportError or console.error in older browsers.

React DOM Server

These new API are now exported from react-dom/server and fully support streaming Suspense on the server:

RenderToPipeableStream: used for streaming in a Node environment.

RenderToReadableStream: suitable for modern edge runtime environments such as Deno and Cloudflare worker.

Existing renderToString methods continue to work, but their use is discouraged.

New Strict Mode Behaviors

In the future, we want to add a feature that allows React to add and remove parts of the UI while retaining the state. For example, when the user leaves the screen and returns, React should be able to display the previous screen immediately. To do this, React unmounts and remounts the tree using the same component state as before.

This feature will provide better out-of-the-box performance for React applications, but requires components to be flexible in dealing with the effects of multiple loads and breakages. Most effects work without any changes, but some assume they are installed or destroyed only once.

To help solve these problems, React 18 introduced a new development-only check in strict mode. Each time a component is mounted for the first time, this new check automatically unmounts and remounts each component, and returns to its previous state on the second mount.

Before this change, React mounts the component and creates the effect:

React mounts the component.

Layout effects are created.

Effects are created.

In strict mode in React 18, React simulates unloading and remounting components in development mode:

React mounts the component.

Layout effects are created.

Effects are created.

React simulates unmounting the component.

Layout effects are destroyed.

Effects are destroyed.

React simulates mounting the component with the previous state.

Layout effects are created.

Effects are created.

New Hooks

UseId

UseId is a new hook used to generate a unique ID on the client and server while avoiding hydration mismatches. It is mainly used for component libraries integrated with accessibility API that requires a unique ID. This solves the problem that already exists in React 17 and earlier, but is even more important in React 18 because of how the new streaming server renderer delivers HTML out of order.

UseTransition

UseTransition and startTransition allow you to mark certain status updates as not urgent. By default, other status updates are considered urgent. React will allow emergency updates (for example, update text input) to interrupt non-emergency updates (for example, rendering a list of search results).

UseDeferredValue

UseDeferredValue allows you to defer the re-rendering of non-urgent parts of the tree. It is similar to de-dithering, but has some advantages compared with it. There is no fixed time delay, so React attempts to delay rendering as soon as the first rendering is reflected on the screen. Delayed rendering is interruptible and does not prevent user input.

UseSyncExternalStore

UseSyncExternalStore is a new hook that allows external storage to support concurrent reads by forcing synchronization of stored updates. When implementing subscriptions to external data sources, it eliminates the need for useEffect and recommends any library that integrates with state external to React.

Note: useSyncExternalStore is intended for use by libraries, not application code.

UseInsertionEffect

UseInsertionEffect is a new hook that allows the CSS-in-JS library to solve the performance problem of injecting styles into rendering. Unless you have built a CSS-in-JS library, we don't want you to use it. This hook will run after a mutation in DOM, but before the layout effect reads the new layout. This solves the problem that already exists in React 17 and earlier, but is more important in React 18 because React gives way to the browser during concurrent rendering, giving it the opportunity to recalculate the layout.

Note: useInsertionEffect is intended for use by libraries, not application code.

After reading this, the article "how to use released, the new feature of React18", has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, please follow the industry information channel.

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.