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参数,不能解决请求快速完成时的"闪烁"问题(即使加载模块只需要几毫秒的时间, fallback也会被执行,就上述代码来说,也就是 Spinner 会闪烁一下),需要自己封装
2. 没有内置的加载错误处理方法,需要自己去处理
3. react-loadable有预加载支持,React.Lazy没有
仍然推荐使用react-loadable来异步加载组件,暂时不用React.Suspense。
参考:https://blog.csdn.net/roamingcode/article/details/85946380