javascript - React 中的多个 Suspense 声明
问题描述
例如我有这个声明:
场景一:
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 声明...
我的问题是可以有像代码 3这样的结构,因为我想在每个依赖项中有多个单独的加载指示器?
由于我正在对每个依赖项进行代码拆分,因此这种方法是否有任何缺点,例如每个子组件中的性能或多个请求?
解决方案
当然,这种方法完全没问题,尤其是当你想为不同的组件使用不同的加载器时。
您提到的一个小缺点是,每个惰性组件都有多个请求,但这并不重要。如果某些组件是有条件的,那么使用多个加载器会更好,因为某些用户可能根本不需要Dependency2
,例如。
要考虑的一件事是“装载机混乱”。从 UX 的角度来看,最好有骨架页面,而不是 4-5 个不同的加载器,它们将分别加载,页面甚至可能会意外跳转。
推荐阅读
- javascript - 循环过程中的 RedirectToAction [.Net Core 3.1]
- python-3.x - python中的凯撒密码没有输出
- spring-jms - MessageListener 接收到的 Business Object 的某些属性为 null
- javascript - Vuetify v-select + item-disabled 怎么用?
- image - 在我的 php 文件中使用我的 html 代码提出问题
- reactjs - 如果google-,maps-react中Polygon中的当前位置如何调用函数?
- python - 请更正以下错误我无法在模型中添加数据
- ubuntu-14.04 - 如何修复 Ubuntu 中的 Postgresql-11 安装失败错误
- sql-server - NCHAR 的 Debezium SQL Server 连接器值
- c# - 如何处理'包还原失败。!错误?