React.lazy和React.Suspense异步加载组件

  • Z时代
  • 2024-01-10
  • 分类：综合

react

在React16.6中引入了React.lazy和React.Suspense，这两个组件，可以用来实现异步加载组件。

例如：

const johanComponent = React.lazy(() => import(/* webpackChunkName: "johanComponent" */ './myAwesome.component'));
export const johanAsyncComponent = props => (
  <React.Suspense fallback={<Spinner />}>
    <johanComponent {...props} />
  </React.Suspense>
);

对比react-loadable，React.Suspense还是有一些不足。

1. 加载组件缺少delay参数，不能解决请求快速完成时的"闪烁"问题（即使加载模块只需要几毫秒的时间， fallback也会被执行，就上述代码来说，也就是 Spinner 会闪烁一下），需要自己封装

2. 没有内置的加载错误处理方法，需要自己去处理

3. react-loadable有预加载支持，React.Lazy没有

仍然推荐使用react-loadable来异步加载组件，暂时不用React.Suspense。

参考：https://blog.csdn.net/roamingcode/article/details/85946380

以上是 React.lazy和React.Suspense异步加载组件 的全部内容， 来源链接： utcz.com/z/381088.html

回到顶部