React Router 4 代码拆分学习笔记（转载）

新建一个js文件

// async-component.js /** * 用于react router4 code splitting */ import React, {Component} from 'react' /** * @param {Function} loadComponent e.g: () => import('./component') * @param {ReactNode} placeholder 未加载前的占位 */ export default (loadComponent, placeholder = null) => { class AsyncComponent extends Component { unmount = false constructor() { super() this.state = { component: null } } componentWillUnmount() { this.unmount = true } async componentDidMount() { const {default: component} = await loadComponent() if(this.unmount) return this.setState({ component: component }) } render() { const C = this.state.component return ( C ? <C {...this.props}></C> : placeholder ) } } return AsyncComponent }

然后直接引入使用

import asyncComponent from './async-component' // 获取到异步组件 const AsyncDemo = asyncComponent(() => import('./demo')) //... render() { return ( <Route path="/demo" component={AsyncDemo}></Route> ) } // 如果要传参 render() { return ( <Route path="/demo" render={() => { <AsyncComponent test="hello"></AsyncComponent> }}></Route> ) }

 

出处： https://www.jianshu.com/p/e3334a2c08e7