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

Posted 2020-11-26 mengff

在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参数，不能解决请求快速完成时的"闪烁"问题，需要自己封装

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

 

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

 

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