1: React.lazy和React.Suspense封装dynamic函数动态引入组件
1:基本使用
//使用方法
import React, {Component} from 'react';
import {dynamic} from './utils';
const LoadingHome = dynamic(() => import('./components/Home'));
const LoadingUser = dynamic(() => import('./components/User'));
class App extends Component {
state = {
showHome: false,
showUser: false
}
toggle = (key) => {
this.setState({
[key]: !this.state[key]
})
}
render() {
let {showHome, showUser} = this.state
return (
<div>
{showHome && <LoadingHome/>}
{showUser && <LoadingUser/>}
<button onClick={() => this.toggle('showHome')}>showHome</button>
<button onClick={() => this.toggle('showUser')}>showUser</button>
</div>
);
}
}
export default App;
复制代码
//封装dynamic函数
import React from 'react';
const Loading = () => <div>Loading</div>;
export function d