React动态加载组件

最新推荐文章于 2025-07-04 16:00:14 发布

原创最新推荐文章于 2025-07-04 16:00:14 发布 · 1.4w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#React #React.lazy #@loadable/components #动态加载React组件

React 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了React动态加载组件的两种方法：React.lazy和@loadable/components。React.lazy适用于客户端，但不支持服务端渲染，而@loadable/components则同时支持客户端和服务端渲染，并提供代码分割功能。在使用时，注意两者对导入路径的要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

查阅react的官网文档，发现两种方式：
React.lazy和 @loadable/components。

依赖包

   {
   "@loadable/component": "^5.7.0",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-router": "^4.3.1",
    "react-scripts": "2.1.8",
  }

React.lazy

假设Foo.js和Bar.js在同一目录下。
Foo.js

export default class Foo extends React.PureComponent{
  render(){
      return <div>This is Foo</div>;
  }
}

Bar.js

const LazyFoo = React.lazy(() => import('./Foo'))
export default class Bar extends React.PureComponent{
	render(){
	  return (
	  /**
	  ** fallback表示LazyFoo未加载完时显示的组件,这里直接使用字符串，使用React.lazy时必须和React.Suspense组合使用
	  **/
	     <React.Suspense fallback={'loading'}> 
  			  <LazyFoo />
  		 </React.Suspense>
	  );
   }
}

其中 () => import(’./Foo’) 返回的是一个promise。因此，不难看出在文件Foo.js中，必须要有一个export default。另外，React.lazy在react-16.8.4的版本不能用于服务端渲染，在服务端进行动态加载，可以使用@loadable/components。

@loadable/components

import loadable from '@loadable/component'

const OtherComponent = loadable(() => import('./OtherComponent'))

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  )
}

React.lazy和@loadable/components的不同之处有哪些呢？@loadable/components官网有一张表：

从这张表上，我们可以看到@loadable/components不仅支持客户端，而且可以支持服务端渲染。@loadable/components可以支持代码分割，而React.lazy只支持组件动态导入。

假设Foo.js和DynamicExport.js位于同一目录下。
虽然说React.lazy不能直接使用

  React.lazy((props) => import(`./${props.path}`))

的形式。另外需要注意一点的是，经过代码实验发现两者的path都必须以改文件目录为起点，“./”不能写在变量里面。

const lazyComponent = path => React.lazy(()=> import(`./${path}`));
const LazyFoo = lazyComponent('Foo');
const LoadableComponent = loadable((props) => import(`./${props.path}`));

export default class extends React.PureComponent{
	render(){
	  return (
		<>
		 <React.Suspense fallback="loading">
		   <LazyFoo />
		 </React.Suspense>
 		 <LoadableComponent path="Foo" />
 		</>
 	  );
	}
}