反应中的多个悬念声明

Question

例如，我有这样的声明：

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

是否可以将每个依赖项的暂记声明分开？ 像这样：

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

然后我将删除路由器文件中的悬念声明...

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

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

Answer 1

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

您提到的小缺点，每个惰性组件有多个请求，但这并不重要。如果某些组件是有条件的，则最好使用多个加载器，因为例如，某些用户甚至可能根本不需要Dependency2。

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