本篇内容介绍了“React代码拆分的方法有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
es6提供import()函数,它是运行时执行,也就是说,什么时候运行到这一句,就会加载指定的模块。
import()返回一个 Promise 对象。在React中,我们可以这样去做。通过打包工具,会在打包的过程中对PageModuels
生成单独的文件,在运行的时候异步加载
import React, { useState, useEffect } from 'react';
const Index = () => {
const [Cmp, setCmp] = useState(null);
useEffect(() => {
import('./PageModules').then((mod) => setCmp(mod.default));
}, []);
return Cmp ? <Cmp /> : <div>Loading...</div>;
};
Loadable Components是一个高阶组件,允许您将代码拆分为更小的块并按需加载,支持服务端渲染,使用方式比较简单。
import loadable from '@loadable/component'
const OtherComponent = loadable(() => import('./OtherComponent'))
function MyComponent() {
return (
<div>
<OtherComponent />
</div>
)
}
它和我们接下来要介绍的React.lazy
还有些区别
React Lazy是react官方提供的解决方案,非常推荐使用该方案去做代码拆分.需要React.Suspense
配合, 该组件可以指定加载指示器(loading indicator),以防其组件树中的某些子组件尚未具备渲染条件。使用方式如下
// 该组件是动态加载的
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
// 显示 <Spinner> 组件直至 OtherComponent 加载完成
<React.Suspense fallback={<Spinner />}>
<div>
<OtherComponent />
</div>
</React.Suspense>
);
}
“React代码拆分的方法有哪些”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://juejin.cn/post/7207063000146051128