手把手教您實現(xiàn)react異步加載高階組件
更新時間：2020年04月07日 08:31:16 作者：吾乃Jiraiya
這篇文章主要介紹了手把手教您實現(xiàn)react異步加載高階組件,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
本篇文章通過分析react-loadable包的源碼，手把手教你實現(xiàn)一個react的異步加載高階組件
1. 首先我們想象中的react異步加載組件應該如何入?yún)⒁约氨┞赌男〢PI？
// 組件應用
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, //異步組件未加載之前l(fā)oading組件
delay: 1000, //異步延遲多久再渲染
timeout: 1000, //異步組件加載超時
})
ComponentA.preload(); //預加載異步組件的方式
const ComponentB = Loadable({
loader: () => import(
/* webpackChunkName: 'componentB' */
'@component/test/componentB.js'),
loading: Loading, //異步組件未加載之前l(fā)oading組件
})
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;
}
}
通過示例可以看到我們需要入?yún)oaded、loading、delay、timeout,同時暴露單個預加載和全部預加載的API,接下來就讓我們試著去一步步實現(xiàn)Loadable高階組件
2.組件實現(xiàn)過程
整個Loaded函數(shù)大體如下
// 收集所有需要異步加載的組件 用于預加載
const ALL_INITIALIZERS = [];
function Loadable(opts){
return createLoadableComponent(load, opts);
}
// 靜態(tài)方法 預加載所有組件
Loadable.preloadAll = function(){
}
接下來實現(xiàn)createLoadableComponent以及l(fā)oad函數(shù)
// 預加載單個異步組件
function load(loader){
let promise = loader();
let state = {
loading: true,
loaded: null,
error: null,
}
state.promise = promise.then(loaded => {
state.loading = false;
state.loaded = loaded;
return loaded;
}).catch(err => {
state.loading = false;
state.error = err;
throw err;
})
return state;
}
// 創(chuàng)建異步加載高階組件
function createLoadableComponent(loadFn, options){
if (!options.loading) {
throw new Error("react-loadable requires a `loading` component");
}
let opts = Object.assign({
loader: null,
loading: null,
delay: 200,
timeout: null,
}, options);
let res = null;
function init(){
if(!res){
res = loadFn(options.loader);
return res.promise;
}
}
ALL_INITIALIZERS.push(init);
return class LoadableComponent extends React{}
}
我們可以看到createLoadableComponent主要功能包括合并默認配置，將異步組件推入預加載數(shù)組，并返回LoadableComponent組件;load函數(shù)用于加載單個組件并返回該組件的初始加載狀態(tài)
接著我們實現(xiàn)核心部分LoadableComponent組件
class LoadableComponent extends React.Component{
constructor(props){
super(props);
//組件初始化之前調用init方法下載異步組件
init();
this.state = {
error: res.error,
postDelay: false,
timedOut: false,
loading: res.loading,
loaded: res.loaded
}
this._delay = null;
this._timeout = null;
}
componentWillMount(){
//設置開關保證不多次去重新請求異步組件
this._mounted = true;
this._loadModule();
}
_loadModule(){
if(!res.loading) return;
if(typeof opts.delay === 'number'){
if(opts.delay === 0){
this.setState({pastDelay: true});
}else{
this._delay = setTimeout(()=>{
this.setState({pastDelay: true});
}, opts.delay)
}
}
if(typeof opts.timeout === 'number'){
this._timeout = setTimeout(()=>{
this.setState({timedOut: true});
}, opts.timeout)
}
let update = () => {
if(!this._mounted) return;
this.setState({
error: res.error,
loaded: res.loaded,
loading: res.loading,
});
}
// 接收異步組件的下載結果并重新setState來render
res.promise.then(()=>{
update()
}).catch(err => {
update()
})
}
// 重新加載異步組件
retry(){
this.setState({
error: null,
timedOut: false,
loading: false,
});
res = loadFn(opts.loader);
this._loadModule();
}
// 靜態(tài)方法 單個組件預加載
static preload(){
init()
}
componentWillUnmount(){
this._mounted = false;
clearTimeout(this._delay);
clearTimeout(this._timeout);
}
render(){
const {loading, error, pastDelay, timedOut, loaded} = this.state;
if(loading || error){
//異步組件還未下載完成的時候渲染loading組件
return React.createElement(opts.loading, {
isLoading: loading,
pastDelay: pastDelay,
timedOut: timedOut,
error: error,
retry: this.retry.bind(this),
})
}else if(loaded){
// 為何此處不直接用React.createElement？
return opts.render(loaded, this.props);
}else{
return null;
}
}
}
可以看到，初始的時候調用init方法啟動異步組件的下載，并在_loadModule方法里面接收異步組件的pending結果，待到異步組件下載完畢，重新setState啟動render
接下來還有個細節(jié)，異步組件并沒有直接啟動React.createElement去渲染，而是采用opts.render方法，這是因為webpack打包生成的單獨異步組件chunk暴露的是一個對象，其default才是對應的組件
實現(xiàn)如下
function resolve(obj) {
return obj && obj.__esModule ? obj.default : obj;
}
function render(loaded, props) {
return React.createElement(resolve(loaded), props);
}
最后實現(xiàn)全部預加載方法
Loadable.preloadAll = function(){
let promises = [];
while(initializers.length){
const init = initializers.pop();
promises.push(init())
}
return Promise.all(promises);
}
整個代碼實現(xiàn)如下
const React = require("react");
// 收集所有需要異步加載的組件
const ALL_INITIALIZERS = [];
// 預加載單個異步組件
function load(loader){
let promise = loader();
let state = {
loading: true,
loaded: null,
error: null,
}
state.promise = promise.then(loaded => {
state.loading = false;
state.loaded = loaded;
return loaded;
}).catch(err => {
state.loading = false;
state.error = err;
throw err;
})
return state;
}
function resolve(obj) {
return obj && obj.__esModule ? obj.default : obj;
}
function render(loaded, props) {
return React.createElement(resolve(loaded), props);
}
// 創(chuàng)建異步加載高階組件
function createLoadableComponent(loadFn, options){
if (!options.loading) {
throw new Error("react-loadable requires a `loading` component");
}
let opts = Object.assign({
loader: null,
loading: null,
delay: 200,
timeout: null,
render,
}, options);
let res = null;
function init(){
if(!res){
res = loadFn(options.loader);
return res.promise;
}
}
ALL_INITIALIZERS.push(init);
class LoadableComponent extends React.Component{
constructor(props){
super(props);
init();
this.state = {
error: res.error,
postDelay: false,
timedOut: false,
loading: res.loading,
loaded: res.loaded
}
this._delay = null;
this._timeout = null;
}
componentWillMount(){
this._mounted = true;
this._loadModule();
}
_loadModule(){
if(!res.loading) return;
if(typeof opts.delay === 'number'){
if(opts.delay === 0){
this.setState({pastDelay: true});
}else{
this._delay = setTimeout(()=>{
this.setState({pastDelay: true});
}, opts.delay)
}
}
if(typeof opts.timeout === 'number'){
this._timeout = setTimeout(()=>{
this.setState({timedOut: true});
}, opts.timeout)
}
let update = () => {
if(!this._mounted) return;
this.setState({
error: res.error,
loaded: res.loaded,
loading: res.loading,
});
}
res.promise.then(()=>{
update()
}).catch(err => {
update()
})
}
// 重新加載異步組件
retry(){
this.setState({
error: null,
timedOut: false,
loading: false,
});
res = loadFn(opts.loader);
this._loadModule();
}
static preload(){
init()
}
componentWillUnmount(){
this._mounted = false;
clearTimeout(this._delay);
clearTimeout(this._timeout);
}
render(){
const {loading, error, pastDelay, timedOut, loaded} = this.state;
if(loading || error){
return React.createElement(opts.loading, {
isLoading: loading,
pastDelay: pastDelay,
timedOut: timedOut,
error: error,
retry: this.retry.bind(this),
})
}else if(loaded){
return opts.render(loaded, this.props);
}else{
return null;
}
}
}
return LoadableComponent;
}
function Loadable(opts){
return createLoadableComponent(load, opts);
}
function flushInitializers(initializers){
}
Loadable.preloadAll = function(){
let promises = [];
while(initializers.length){
const init = initializers.pop();
promises.push(init())
}
return Promise.all(promises);
}
export default Loadable;
到此這篇關于手把手教您實現(xiàn)react異步加載高階組件的文章就介紹到這了,更多相關react異步加載高階組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
React?中如何將CSS?visibility?屬性設置為?hidden
這篇文章主要介紹了React中如何將CSS?visibility屬性設置為?hidden,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05
這篇文章主要介紹了React項目中decorators裝飾器報錯，本文給大家分享問題所在原因及解決方案，通過圖文實例相結合給大家介紹的非常詳細,需要的朋友可以參考下2023-01-01
本篇文章主要介紹了React Navigation 使用中遇到的問題小結，主要是安卓和iOS中相對不協(xié)調的地方，特此記錄，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
這篇文章主要為大家詳細介紹了React實現(xiàn)動態(tài)調用的彈框組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
React鉤子函數(shù)之useDeferredValue的基本使用示例詳解
useDeferredValue是React 18中非常有用的一個鉤子函數(shù)，它可以幫助我們優(yōu)化渲染性能，并讓UI更加流暢，如果你還沒有嘗試過它，不妨在你的下一個React項目中試一試，這篇文章主要介紹了React鉤子函數(shù)之useDeferredValue的基本使用,需要的朋友可以參考下2023-08-08
關于React中使用window.print()出現(xiàn)頁面無響應問題解決記錄
這篇文章主要介紹了React中使用window.print()出現(xiàn)頁面無響應問題解決記錄，首先問題原因可能是操作了document但是并未進行銷毀（可能是），具體問題解決思路參考下本文吧2021-11-11
這篇文章主要介紹了React組件中的this的具體使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家介紹了JWT身份校驗與React-router無縫集成的探討解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
Hook 是 React 16.8 的新增特性，本文主要介紹了10種Hook的使用，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
ahooks封裝cookie?localStorage?sessionStorage方法
這篇文章主要為大家介紹了ahooks封裝cookie?localStorage?sessionStorage的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07