【React】react如何动态加载组件？

Z时代
2024-01-10
分类：技术分享

有很多组件、根据类型不同，希望能够动态加载对应的组件。

现在的做法是，通过if else 或者switch 去渲染，但是这些组件都是一次性的全部加载进来了。

回答

可以尝试着使用一下 react-loadable，一款按需加载的工具，功能挺齐全的~~~

在render函数里面定义一个变量let component = ''保存想渲染的组件，根据条件将不同的组件赋值给前面的变量，最后将变量写入return里面<div>{component}</div>

可以搜索一下 webpack，code split

使用 require('Component') 动态加载组件：

if (type = 'number') {
    Input = require('NumberInput')}

PS：这段代码应该在编译的过程中完成。

https://segmentfault.com/a/11...
这篇文章写得挺好的，我现在也是按照这种方式做的：

定义一个 asyncComponent 函数

使用方式

import { asyncComponent } from './AsyncComponent'
const Foo = asyncComponent(() => import(/* webpackChunkName: "foo" */ "./foo"))<Route path="/xx" component={Foo} />

webpack配置文件中，配置chunkName
chunkFilename: '[name].js'

文章里面用的webpack2，我使用的是webpack3，功能是OK的。

补充：也可以看看这篇文章 https://segmentfault.com/a/11...

如果你使用的webpack1，可以使用require.ensure();
语法如下：

require.ensure(dependencies: String[], callback: function(require), chunkName: String)

可参考链接：http://www.css88.com/doc/webp...

如果你用的webpack2或webpack3，请使用import()
语法如下：

import("模块路径").then(ModuleName =>{});

参考链接：https://webpack.js.org/api/mo...

其实以上是使用webpack的代码分离和按需加载功能；

以下是参考文章：
webpack 按需打包加载: https://github.com/eyasliu/bl...
在Webpack中使用Code Splitting实现按需加载: http://www.alloyteam.com/2016...
基于webpack Code Splitting实现react组件的按需加载: https://zhuanlan.zhihu.com/p/...

react-loadable吧，这玩意很强大，需要webpack2+以及babel-plugin-dynamic-import-webpack插件支持。
如果你升级最新create-react-app，则不需要额外配置，直接引入即可，最新版官方脚手架好似已经帮你解决了import()的语法支持。

【React】react如何动态加载组件？

dynamic.js

import Loadable from 'react-loadable'
//下面一段代码即可按需按需加载完react组件，webpack会自动切割代码
export const AdminList = Loadable({
  loader: () => import('./admin.list'),
  loading: () => null})

routes.js

import React from 'react'
import { Route, Switch } from 'react-router-dom'
import * as routerMap from 'rootPath/application/config/routerMap'
import { AdminList } from './dynamic'
export default () => (
  <Switch>
    <Route exact path={routerMap.ADMIN_LIST} component={AdminList} />
  </Switch>)

webpack切割后的代码：

【React】react如何动态加载组件？