介绍
这篇文章主要介绍了反应和回来的的代码分离与动态导入示例,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
<强>代码分离与动态导入
对于大型网络应用程序,代码组织非常重要。它有助于创建高性能且易于理解的代码。最简单的策略之一就是代码分离。使用像Webpack这样的工具,可以将代码拆分成更小的部分,它们分为两个不同的策略,静态和动态。
通过静态代码分离,首先将应用程序的每个不同部分作为给定的入口点。这允许Webpack在构建时将每个入口点拆分为单独的包。如果我们知道我们的应用程序的哪些部分将被浏览最多,这是完美的。
动态导入使用的是Webpack的进口方法来加载代码。由于进口方法返回一个承诺,所以可以使用异步等待来处理返回结果。
//getComponent.js
异步函数getComponent () {
const{默认值:模块}=等待进口(& # 39;. ./some-other-file& # 39;)
常量元素=document.createElement (& # 39; p # 39;)
元素。innerHTML=module.render ()
返回元素
} 虽然这是一个很不自然的例子,但是可以看到这是一个多么简单的方法。通过使用Webpack来完成繁重的工作,我们可以将应用程序分成不同的模块。当用户点击应用程序的特定部分时,才加载我们需要的代码。
如果我们将这种方法与反应提供给我们的控制结构相结合,我们就可以通过延迟加载来进行代码分割。这允许我们将代码的加载延迟到最后一分钟,从而减少初始页面加载。
使用反应处理延迟加载
为了导入我们的模块,我们需要决定应该使用什么API。考虑到我们使用反应来渲染内容,让我们从这里开始。
下面是一个使用视图命名空间导出模块组件的简单API。
//my-module.js
进口*从& # 39;反应反应# 39;
出口默认{
观点:()=比;& lt; p>我的模块View
} 现在我们使用导入方法来加载这个文件,我们可以很容易地访问模块的视图,组件,例如
异步函数getComponent () {
const{默认}=等待进口(& # 39;。/my-module& # 39;)
返回React.createElement (default.view)
}) 然而,我们仍然没有使用中反应的方法来延迟加载模块。通过创建一个 LazyLoadModule 组件来实现这一点。该组件将负责解析和渲染给定模块的视图组件。
//lazyModule.js
从“进口*作为反应;react";
出口类LazyLoadModule延伸反应。组件{
构造函数(道具){
超级(道具);
这一点。状态={
模块:零
}；
}//初始渲染后,等待模块加载
异步componentDidMount () {
const{解决}=this.props;
const{默认值:模块}=等待解决();
这一点。模块设置状态({});
}
呈现(){
const{模块}=this.state;
如果模块(!)返回& lt; p>加载模块……& lt;/p>;
如果(module.view)返回React.createElement (module.view);
}
} 以下是使用<强> LazyLoadModule 强组件来加载模块的视图方式:
//my-app.js
从& # 39;进口{LazyLoadModule}。/LazyLoadModule& # 39;
const MyApp=()=比;（
& lt; p className=& # 39;应用# 39;比;
& lt; h2> Hello
& lt; LazyLoadModule解决={()=比;进口(& # 39;。/模块/my-module& # 39;)}/比;
& lt;/p>
)
ReactDOM.render (& lt; MyApp/祝辞,. getelementbyid(& # 39;根# 39;)) 下面是一个线上的示例,其中补充一些异常的处理。
https://codesandbox.io/embed/..。
通过使用反应来处理每个模块的加载,我们可以在应用程序的任何时间延迟加载组件,这包括嵌套模块。
使用回来的
到目前为止,我们已经演示了如何动态加载应用程序的模块。然而,我们仍然需要在加载时将正确的数据输入到我们的模块中。
让我们来看看如何将回来的存储连接到模块。我们已经通过公开每个模块的视图组件为每个模块创建了一个API。我们可以通过暴露每个模块的减速器来扩展它。还需要公开一个名称,在该名称下我们的模块状态将存在于应用程序的商店中。
//my-module.js
进口*从& # 39;反应反应# 39;
进口{连接}& # 39;react-redux& # 39;
const mapStateToProps=(州)=比;({
foo:状态(& # 39;my-module& # 39;] . foo,
}）=连接(mapStateToProps) (const视图({foo})=比;& lt; p> {foo} & lt;/p>)
const fooReducer=(状态=& # 39;有些东西# 39;)=比;{
返回状态
}
const还原剂={
& # 39;foo # 39;: fooReducer,
}
出口默认{
名称:& # 39;my-module& # 39;
看来,
还原剂,
}
