A brief analysis of SuspenseList in React18 and what is its use

This article will take you to understand the SuspenseList in React18 and introduce the role of SuspenseList. I hope it will be helpful to everyone!

Suspense’s past and present life

The first time this feature appeared in the historical versions of React was version 16.6, which was released Suspense component that supports code splitting. Data extraction is now supported in version 16.9. Interested students can move to changelog of React. [Related recommendations: Redis video tutorial]

Simple use of Suspense

has been introduced in the previous article, we only use an example to review the concept And when using

// 这个组件是动态加载的
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

, when the OtherComponent component does not yet have rendering conditions, the component passed in fallback will be used for prefabricated rendering. The specific manifestations of not having the rendering conditions here are that the data acquisition time is long, the component structure is complex, etc., but we do not want these to affect the first screen rendering or initialization of the application. The previous Suspense article has introduced it, and I will not use it anymore. Repeat.

What is SuspenseList

The literal meaning can be easily understood, that is, if there are multiple Suspense in our code, How should we control their display order and display method? Therefore, React officially provides us with the SuspenseList component.

<SuspenseList revealOrder="forwards">
  <Suspense fallback={&#39;加载中...&#39;}>
    <ProfilePicture id={1} />
  </Suspense>
  <Suspense fallback={&#39;加载中...&#39;}>
    <ProfilePicture id={2} />
  </Suspense>
  <Suspense fallback={&#39;加载中...&#39;}>
    <ProfilePicture id={3} />
  </Suspense>
  ...
</SuspenseList>

Let’s first introduce the only two SuspenseListProps

revealOrder represents the sub Loading order of Suspense, optional values ​​are forwards, backwards, together

• forwards represents the same level, displayed from front to back. Regardless of the request speed, the front is displayed first.

• backwards is the opposite of forwards

• together means that all suspenses will be displayed at the same time after they are ready, rather than displayed one by one.

tailSpecify how to display SuspenseListBehavior of unloaded items in

• By default, SuspenseList will show all fallbacks in the list

• collapsed Only show the next fallback in the list

##hidden No information is displayed for unloaded items

ps:

SuspenseList only works on Suspense or SuspenseList of the immediate sub-level, and will not work on grandchild nodes.

The role of SuspenseList

SuspenseList allows us to perform composite orchestration on a group of Suspense behaviors. Although in the demonstration The demo in is relatively simple, but if it is a larger project, we often use Layout for layout. Take our common middle and back-end management platforms and the C-side main page as an example.

In the middle and back-end systems, we often use the main page of the top bar and side bar to layout. At this level, currently In the industry, most micro-front-end practices are implemented, such as

qiankun.js, including the author's team, which has also explored its own micro-front-end implementation system. If you are on a C-side page, it may not be appropriate to use a micro front-end method. If there are requirements for multi-block rendering in the page, use SuspenseList and Suspense combined with the React backend to render SSR. ability, you can achieve the effects of loading order and behavior of independent blocks in a more systematic way.

For more programming related knowledge, please visit:

Programming Video! !

The above is the detailed content of A brief analysis of SuspenseList in React18 and what is its use. For more information, please follow other related articles on the PHP Chinese website!