React 中的多个 Suspense 声明

Question

例如我有这个声明：

场景一：

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>
   );
}

是否可以为每个 Dependency 分开 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>
   );
}

然后我将删除 Router 文件中的 Suspense 声明...

我的问题是可以使用 代码 3 这样的结构吗，因为我想在每个依赖项中有多个单独的加载指示器？

这种方法是否有任何缺点，例如性能或每个子组件中的多个请求，因为我正在代码拆分每个依赖项？

Answer 1

当然，这种方法完全没问题，尤其是当您想为不同的组件使用不同的加载程序时。

您提到了一个小缺点，每个惰性组件都有多个请求，但这并没有太大关系。如果某些组件是有条件的，那么使用多个加载器甚至会更好，因为某些用户甚至可能根本不需要 Dependency2，例如。

需要考虑的一件事是 "loaders clutter"。从 UX 的角度来看，使用框架页面而不是 4-5 个不同的加载器可能会更好，这些加载器将单独加载，页面甚至可能会意外跳转。

React 中的多个 Suspense 声明

Multiple Suspense declaration in React

javascript

typescript

reactjs

react-hooks

react-suspense