react-loadable解决什么问题?
当你的项目足够大时，把所有代码打包到一个bundle中的启动时间就会成为问题。这时就需要把app拆分为若干个bundle，然后根据需求动态加载它们.
react-loadable的关键实现
1.import 和 import()是不同的.
import * from '';在编译阶段执行，同步执行。
import(相对路径) 异步执行，返回Promise对象。
2.state的loaded为真正渲染的组件。根据loading, error展示loading组件还是真实组件。
具体代码如下:
function load(loader) {
// loader为传入的参数loader: () => import('');
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;
}
render() {
if (this.state.loading || this.state.error) {
return React.createElement(opts.loading, {
isLoading: this.state.loading,
pastDelay: this.state.pastDelay,
timedOut: this.state.timedOut,
error: this.state.error,
retry: this.retry
});
} else if (this.state.loaded) {
return opts.render(this.state.loaded, this.props);
} else {
return null;
}
}
