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

在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

猜你喜欢

转载自www.cnblogs.com/mengff/p/11969640.html
今日推荐