React 中的多个 Suspense 声明答案

【问题标题】：Multiple Suspense declaration in ReactReact 中的多个 Suspense 声明
【发布时间】：2020-10-05 20:33:45
【问题描述】：

例如我有这个声明：

场景 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 声明...

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

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

【问题讨论】：

标签： javascript reactjs typescript react-hooks react-suspense

【解决方案1】：

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

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

要考虑的一件事是“加载程序混乱”。从 UX 的角度来看，最好有骨架页面，而不是 4-5 个不同的加载器，它们将分别加载，页面甚至可能会意外跳转。

【讨论】：