Объявление множественной приостановки в React - PullRequest
Новая
       18

Объявление множественной приостановки в React

1 голос
/ 16 июня 2020

Например, у меня есть это объявление:

Сценарий 1: 

const ComponentA = lazy(() => import('pages/ComponentA'));
const ComponentB = lazy(() => import('pages/ComponentB'));

<Router>
  <Switch>
     <Suspense fallback={'loading...'}>
       <Route path="/A" component={ComponentA} exact/>
       <Route path="/B" component={ComponentB} exact/> 
     </Suspense>
  </Switch>
</Router>

Этот сценарий прекрасен, если зависимость загрузки ComponentA равна 1.

Но для сценария 2: что, если у меня есть множественная зависимость в ComponentA?

Код 2 

import Dependency1 from 'component/dependency1';
import Dependency2 from 'component/dependency2';

const ComponentA = () => {
   return (
     <div>
       <Dependency1/>
       <Dependency2/>
     </div>
   );
}

можно ли разделять объявление Suspense для каждой зависимости? вот так:

Код 3 

 const Dependency1 = lazy(() => import('component/dependency1'));
 const Dependency2 = lazy(() => import('component/dependency2'));

 const ComponentA = () => {
   return (
     <div>
       <Suspense fallback={'Loading Dependency1'}>
         <Dependency1/>
       <Suspense/>
       <Suspense fallback={'Loading Dependency2'}>
        <Dependency2/>
       <Suspense/>
     </div>
   );
}

тогда я удалю объявление Suspense в файле Router ...

Мой вопрос нормально иметь такую ​​структуру, как Код 3 , поскольку я хочу иметь несколько отдельных индикаторов загрузки в каждой зависимости?

Есть ли какие-либо недостатки этого подхода, такие как производительность или несколько запросов в каждой подгруппе -компонент, поскольку я разделяю код на каждую зависимость?

1 Ответ

2 голосов
/ 16 июня 2020

Конечно, такой подход вполне подходит, особенно если вы хотите иметь разные загрузчики для разных компонентов.

Есть небольшой недостаток, о котором вы упомянули, несколько запросов для каждого ленивого компонента, но это не имеет большого значения . Если некоторые компоненты являются условными, было бы даже лучше использовать несколько загрузчиков, поскольку некоторым пользователям может вообще не понадобиться Dependency2, например.

Следует учитывать "беспорядок в загрузчиках". С точки зрения UX, может быть лучше иметь скелетную страницу вместо 4-5 разных загрузчиков, которые будут загружаться отдельно, и страница может даже неожиданно прыгать.

...