React中，使用Lazy和Suspense延迟加载组件

步骤1

在react中引入

import React, { Suspense, useEffect, useState } from 'react';

步骤2：声明组件

// 使用lazy来延迟加载Chart组件

const LazyChart = React.lazy(() => import('./ReactChartMap'));

步骤3：设置一个状态来标记是否加载组件，在useEffect中，使用settimeout模拟延迟加载

const [isChartLoaded, setIsChartLoaded] = useState(false); useEffect(() => { // 模拟延迟加载，在2秒后设置isChartLoaded为true const timeout = setTimeout(() => { setIsChartLoaded(true); }, 0); return () => clearTimeout(timeout); }, []);

完整代码

import React, { Suspense, useEffect, useState } from 'react';

// 使用lazy来延迟加载Chart组件 

const LazyChart = React.lazy(() => import('./ReactChartMap'));

const App = (props) => { 

// 设置一个状态来标记是否加载组件 

const [isChartLoaded, setIsChartLoaded] = useState(false); 

useEffect(() => { 
// 模拟延迟加载，在2秒后设置isChartLoaded为true 
const timeout = setTimeout(() => { 
setIsChartLoaded(true); 
}, 0);
return () => clearTimeout(timeout); 
}, []); 
return ( 
<div> 
<Suspense fallback={<div>Loading Chart...</div>}>
{isChartLoaded && <LazyChart {...props} />}
</Suspense> 
</div> );
}; 
export default App;