React动态加载组件

本文介绍了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" />
 		</>
 	  );
	}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值