React import()按需异步加载asyncComponent

时间:2020-9-2 作者:admin

import()方法返回的是一个Promise
asyncComponent是一个返回组件的函数

const asyncComponent = (importComponent) => {
    return class extends Component {
        constructor(){
            super();
            this.state = {
                component: null
            }
        }
        componentDidMount() {
            importComponent().then(cmp => {
                this.setState({
                    component: cmp.default
                });
            });
        }
        render() {
            const C = this.state.component;
            return C ? <C {...this.props} /> : null
        }
    }
}

使用:

const Home = AsyncCompoent(() => import('./Home/index/js'));
const City = AsyncCompoent(() => {
    impirt('./city/index.js')
});
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。