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

最新推荐文章于 2024-07-27 11:38:12 发布

大大的笨小鸟

最新推荐文章于 2024-07-27 11:38:12 发布

阅读量314

点赞数

新建一个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