反应中的多重悬念声明
反应中的多重悬念声明
提问于 2020-06-16 09:13:00
例如，我有一个声明：
场景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>
);
}然后我将删除路由器文件中的悬念声明..。
我的问题是，是否可以有一个类似代码3的结构，因为我希望在每个依赖项中有一个多个单独的加载指示符？
这种方法是否有任何缺点，比如性能或每个子组件中的多个请求，因为我在代码中分割每个依赖项？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-06-16 11:26:49
当然，这种方法是完全好的，特别是当您想要为不同的组件拥有不同的加载器时。
您提到的有一些小的缺点，每个延迟组件都有多个请求，但这并不重要。如果某些组件是有条件的，那么最好使用多个加载器，例如，有些用户甚至可能根本不需要Dependency2。
需要考虑的一件事是“装载机杂乱”。从UX的角度来看，最好是有框架页面，而不是4-5种不同的加载器，它们将单独加载，页面甚至可能意外跳转。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62405023
复制相关文章
相似问题
腾讯云开发者
