zoukankan      html  css  js  c++  java
  • React动态import()

    React动态import()

    react-router@v4代码分离,推荐的import()。这里分享webpack配置和使用方法。

    首先安装两个必须的包

    cnpm i react-loadable babel-plugin-syntax-dynamic-import -D
    

    react-loadable是官方推荐的动态加载组件,babel-plugin-syntax-dynamic-import是babel支持webpack的import()插件。
    配置方法:在.babelrc

    {
      "presets": [
        "react"
      ],
      "plugins": [
        "syntax-dynamic-import"
      ]
    }
    

    上面babel-plugin前缀是可以省略的。

    上面配好后,如果你配了eslint还是会报错的,如果eslint配置不对。报import() undefined
    要保证eslint不报import()错误需要
    cnpm i babel-eslint -D

    然后在.eslintrc加上配置

    module.exports = {
      //...若干配置
      
      parser: "babel-eslint"
    }
    

    使用babel-eslint解析才可以识别import()

    然后就是使用了_

    这里我把官方的demo封装成了一个文件loadable.jsx

    import React from 'react'
    import Loadable from 'react-loadable'
    
    const Loading = () => {
      return <div>loading...</div>
    }
    
    export default (Loader) => {
      const LoadableComponent = Loadable({
        loader: Loader,
        loading: Loading
      })
    
      return class LoadableHOC extends React.Component {
        render () {
          return <LoadableComponent></LoadableComponent>
        }
      }
    }
    

    随便写一个需要动态导入的组件Import.jsx

    import React from 'react'
    
    class Import extends React.Component {
      render () {
        return <div>import...</div>
      }
    }
    
    export default Import
    
    

    包含的动态导入的容器组件Test.jsx

    import React from 'react'
    import loadable from '@/utils/loadable'
    
    const Import = loadable(() => import('@/components/Import'))
    
    class Test extends React.Component {
      render () {
        return (<div>
          <Import></Import>
        </div>)
      }
    }
    
    export default Test
    
    

    然后在main.jsx

    import React from 'react'
    import ReactDom from 'react-dom'
    import Test from '@/components/Test'
    
    ReactDom.render(<Test />, document.getElementById('app'))
    
    
  • 相关阅读:
    C++ Programming Language中的narrow_cast实现
    使用反射处理protobuf数据结构
    Qt中三种解析xml的方式
    iterator简单描述
    关于Strategy和State设计模式
    Jedis连接redis客户端
    Redis基础命令
    redis的安装和启动linux环境
    Redis简介和常见的面试题
    SSM框架整合
  • 原文地址:https://www.cnblogs.com/lantuoxie/p/9104014.html
Copyright © 2011-2022 走看看