React 加载异步组件(高级)
异步组件
- import
- React.lazy
- React.Suspense
例子
js
import React from 'react';
const ContextDemo = React.lazy(() => import('./ContextDemo'));
class LazyDemo extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<p>引入一个动态组件</p>
<hr />
<React.Suspense fallback={<div>Loading...</div>}>
<ContextDemo></ContextDemo>
</React.Suspense>
</div>
);
// 1、强制刷新,可以看到 loading (看不到就限制一下 chrome 网速)
// 2、看 network 的 js 加载
}
}
export default LazyDemo;