手把手教您实现手把手教您实现react异步加载高阶组件异步加载高阶组件
主要介绍了手把手教您实现react异步加载高阶组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作
具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
本篇文章通过分析react-loadable包的源码,手把手教你实现一个react的异步加载高阶组件
1. 首先我们想象中的首先我们想象中的react异步加载组件应该如何入参以及暴露哪些异步加载组件应该如何入参以及暴露哪些API??
// 组件应用
import * as React from 'react';
import ReactDOM from 'react-dom';
import Loadable from '@component/test/Loadable';
import Loading from '@component/test/loading';
const ComponentA = Loadable({
loader: () => import(
/* webpackChunkName: 'componentA' */
'@component/test/componentA.js'),
loading: Loading, //异步组件未加载之前loading组件
delay: 1000, //异步延迟多久再渲染
timeout: 1000, //异步组件加载超时
})
ComponentA.preload(); //预加载异步组件的方式
const ComponentB = Loadable({
loader: () => import(
/* webpackChunkName: 'componentB' */
'@component/test/componentB.js'),
loading: Loading, //异步组件未加载之前loading组件
})
Loadable.preloadAll().then(() => {
//
}).catch(err => {
//
}); //预加载所有的异步组件
const App = (props) => {
const [isDisplay, setIsDisplay] = React.useState(false);
if(isDisplay){
return <React.Fragment>
<ComponentA />
<ComponentB />
</React.Fragment>
}else{
return <input type='button' value='点我' onClick={()=>{setIsDisplay(true)}}/>
}
}
ReactDOM.render(<App />, document.getElementById('app'));
// loading组件
import * as React from 'react';
export default (props) => {
const {error, pastDelay, isLoading, timedOut, retry} = props;
if (props.error) {
return <div>Error! <button onClick={ retry }>Retry</button></div>;
} else if (timedOut) {
return <div>Taking a long time... <button onClick={ retry }>Retry</button></div>;
} else if (props.pastDelay) {
return <div>Loading...</div>;
} else {
return null;
}
}
通过示例可以看到我们需要入参loaded、loading、delay、timeout,同时暴露单个预加载和全部预加载的API,接下来就让我们
试着去一步步实现Loadable高阶组件
2.组件实现过程组件实现过程
整个Loaded函数大体如下
// 收集所有需要异步加载的组件 用于预加载
const ALL_INITIALIZERS = [];
function Loadable(opts){