홈페이지>웹 디자인 튜토리얼>자바스크립트 튜토리얼

React18의 SuspenseList에 대한 간략한 분석과 그 용도

저자：Eve Cole 업데이트 시간：2022-08-30 09:31:44
이 기사에서는 React18의 SuspenseList에 대해 알아보고 SuspenseList의 역할을 소개하겠습니다. 도움이 되길 바랍니다.

VUE3.0을 빠르게 시작하는 방법:

Suspense의 과거와 현재에 대해 알아보세요.

이 기능은 React의 이전 버전에 처음 등장했는데, 이 기능은 코드 분할을 지원하는 Suspense 구성 요소를 출시했습니다. 이제 버전 16.9에서 데이터 추출이 지원됩니다. 관심 있는 학생들은 React 의 changelog 로 이동할 수 있습니다.

Suspense의 간단한 사용법은

이전에 소개한 바 있습니다. 개념을 검토하기 위해 예제만 사용하고

// This 컴포넌트는 동적으로 로드됩니다. const OtherComponent = React.lazy(() => import('./OtherComponent'));

함수 MyComponent() {
  반품 (
    <React.Suspense fallback={<Spinner />}>
      <div>
        <기타 구성요소 />
      </div>
    </React.Suspense>
  );
}

OtherComponent 구성 요소에 아직 렌더링 조건이 없는 경우 fallback 으로 전달된 구성 요소는 사전 제작된 렌더링에 사용됩니다. 여기서 렌더링 조건이 부족하다는 구체적인 표현은 데이터 수집 시간이 길고 구성 요소 구조가 복잡하다는 것입니다. 그러나 우리는 이것이 첫 번째 화면 렌더링이나 응용 프로그램의 초기화에 영향을 미치기를 원하지 않습니다. 이전 Suspense 기사. 소개했으므로 자세한 내용은 다루지 않겠습니다.

SuspenseList란

말 그대로 쉽게 이해할 수 있는 것입니다. 즉, 코드에 Suspense 여러 개 있는 경우 표시 순서와 표시 방법을 어떻게 제어해야 할까요? 따라서 React 공식적으로 SuspenseList 구성 요소를 제공합니다.

<SuspenseList 공개 주문="전달">
  <일시 중단 폴백={'로드 중...'}>
    <프로필 사진 ID={1} />
  </서스펜스>
  <일시 중단 폴백={'로드 중...'}>
    <프로필 사진 ID={2} />
  </서스펜스>
  <일시 중단 폴백={'로드 중...'}>
    <프로필 사진 ID={3} />
  </서스펜스>
  ...
</SuspenseList>

먼저 SuspenseList 의 두 가지 Props 소개하겠습니다.

revealOrder backwards forwards Suspense 로딩 순서를 나타 together

  • forwards 요청 속도에 관계없이 뒤로 먼저 표시하는 것은

  • 앞으로의 반대 backwards .

  • together 모든 정지가 준비되면 동시에 표시된다는 의미이며,

tail 하나씩 표시하는 방법을 지정합니다

.

SuspenseList 의 언로드된 항목

    기본적으로 SuspenseList는

  • 목록 SuspenseList

    • collapsed 모든 폴백을 표시하고 목록만 표시합니다.

hidden 언로드된 다음 폴백 프로젝트는 어떤 정보도 표시하지 않습니다

.

ps: SuspenseList 직접 하위 수준의 Suspense 또는 SuspenseList 에서만 작동합니다. , 손자 노드에서는 작동하지 않습니다.

SuspenseList의 역할을

SuspenseList Suspense 동작 그룹의 복합 오케스트레이션을 수행할 수 있습니다. 데모의 데모는 상대적으로 간단하지만 상대적으로 큰 프로젝트에서는 레이아웃을 위해 Layout 사용하는 경우가 많습니다. 일반적인 중간 및 백엔드 관리 플랫폼과 C 측 메인 페이지를 예로 들어 보겠습니다.

1.png

2.jpg

중간 및 백엔드 시스템에서는 상단 바 + 사이드 바 + 메인 페이지 레이아웃 방법을 자주 사용합니다. 이 수준에서 현재 업계는 qiankun.js 와 같은 마이크로 프런트 엔드 루틴을 주로 실행합니다. 저자 팀은 자체 마이크로 프런트엔드 구현 시스템 세트를 탐색했습니다. C사이드 페이지라면 마이크로 프론트엔드 방식을 사용하는 것이 부적절할 수 있습니다. 페이지에 멀티 블록 렌더링이 필요한 경우에는 SuspenseList 와 Suspense React 백엔드의 기능과 결합하여 사용할 수 있습니다. SSR을 렌더링하여 보다 체계적인 방식으로 독립적인 블록 렌더링을 달성합니다. 로딩 순서 및 동작의 효과.
관련 기사