在项目中某些组件过大影响渲染速度时或者是组件需要懒加载时,可以使用异步组件加载。
在 React 中实现组件异步加载示例:
import React from 'react'
const AsynchronousComp = React.lazy(() => { import('../React_JSX') })
class ReactComp extends React.Component {
render() {
/**
* 1. 使用 React.Lazy 和 import() 来引入组件
* 2. 使用<React.Suspense></React.Suspense>来做异步组件的父组件,并使用 fallback 来实现组件未加载完成时展示信息
* 3. fallback 可以传入html,也可以自行封装一个统一的提示组件
*/
return (
<div>
<p>异步加载</p>
<p>---------------------</p>
<React.Suspense
fallback={
<div>loading...</div>
}
>
<AsynchronousComp />
</React.Suspense>
</div>
)
}
}
export default ReactComp;