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

This article mainly explains "What is the role of SuspenseList in React18". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "What is the role of SuspenseList in React18"!

Suspense's past life

This feature has appeared in historical releases of React, first in version 16.6, which released Suspense components that support code splitting. Data extraction was subsequently supported in version 16.9. Interested students can move to React's changelog.

Simple use of suspension

As mentioned above, we will use only one example to review the concept and use.

//This component is dynamically loaded const OtherComponent = React.lazy(() => import ('./ OtherComponent'));function MyComponent() { return ( );}

When the OtherComponent component is not ready for rendering, it will be pre-rendered with the component passed in by fallback. The specific performance of not having rendering conditions here is that the data acquisition time is long, the component structure is complex, etc., but I don't want to affect the first screen rendering or initialization of the application because of these. The previous Suspense article has introduced it, so I won't repeat it.

What is SuspenseList?

If we have multiple Suspenses in our code, how do we control the order and presentation of them? From this React officially provided us with SuspenseList components.

...

Let's start with SuspenseList's only two Props.

revealOrder indicates the loading order of sub-Suspense. Optional values include forwards, backwards, together.

forward means the same level, from front to back, regardless of the request speed is the first to show

Backwards is the opposite of forwards.

together indicates that all suspensions are ready to be displayed at the same time, rather than one by one

tail Specifies how to display behavior for unloaded items in SuspenseList

By default, SuspenseList displays all fallbacks in the list

collapsed shows only the next fallback in the list

hidden Unloaded items do not display any information

ps: SuspenseList only works on Suspense or SuspenseList of immediate child levels, not grandchild nodes.

The Role of SuspenseList

SuspenseList allows us to orchestrate a complex set of Suspense behaviors. Although the demo is relatively simple in demos, we often use Layout for layout if we are on a larger project. Take our common back-end management platform and C-end main page for example.

In the middle and back-end system, we often use the top bar + sidebar + main page to layout. At this level, most of the micro-front-end routines are practiced in the industry, such as qiankun.js, including the team where the author belongs, and we have also explored a set of our own micro-front-end implementation system. If the micro-frontend method is adopted on the C-side page, it may not be appropriate. On the requirement of multi-block rendering in the page, SuspenseList and Suspense combined with the ability of React backend rendering SSR can be used to systematically realize the loading order and behavior effect of independent blocks.

At this point, I believe everyone has a deeper understanding of "what is the role of SuspenseList in React18". Let's do it in practice! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

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.