react在16版本后引入了lazy和Suspense，利用这两个可以做到路由的懒加载和代码分割，不会让所有的路由都统统打包到同一个chunk中去，在用到的时候才会去加载，可以大大节省请求资源所需要消耗的时间。
const OtherComponent = React.lazy(() => import(/* webpackChunkName: 'OtherComponent' */ './OtherComponent'));
// 它只能接收 export default出来的react组件，这样就能将otherComponent这个组件分割出来了
// webpackChunkName 这个的作用相当于是给分割出来的文件重新命名，不然打包出来的就会使0.chunk.js这样的
方法一
React.lazy和React.Suspense这两个是结合起来一起用的，这样就能做到懒加载的效果
import React, { lazy, Suspense } from 'react';
import import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = lazy(() => import(/* webpackChunkName: 'Home'*/ './Home'));
const List = lazy(() => import('./List'));
// 这里不写webpackChunkName的话打包出来的的会是0.chunk.js,1.chunk.js这样的包
const App = () => (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/list" component={List}/>
// 或者
<Route path="/list" render={props => <Suspense fallback={<div>Loading</div>}><List {...props} /></Suspense>}/>
// 怎么开心怎么来
</Switch>
</Suspense>
</Router>
);
打包截图
方法二（利用@babel/plugin-syntax-dynamic-import实现）
// childComponent
export default () => <div>动态import加载组件</div>
// parentComponent
class ParentCom extends React.Component {
constructor(props) {
super(props);
this.state = {
DynamicComponent: null
}
}
loadComponent() {
// 能够这样使用import其实是通过babel的@babel/plugin-syntax-dynamic-import实现的，这里create-react-app已经全部都弄好了，不需要我们再做任何操作
// 如果是自己搭建的话 需要安装 @babel/plugin-syntax-dynamic-import，并且在.babelrc里面配置一下
// "plugins": [ "@babel/plugin-syntax-dynamic-import" ]
import('./childComponent.js').then((res) => {
this.setState({
DynamicComponent: res.default
});
});
}
render() {
return (
<div>
{ DynamicComponent&& <DynamicComponent/> }
<button onClick={this.loadComponent.bind(this)}>loadComponent</button>
</div>
);
}
}
// hookd4.jsx
import React from 'react';
const Hooks4 = () => (
<span>hooks4</span>
);
export const Test = () => <span>test</span>
export default Hooks4;
// 在hooks中使用
import React, { useState, useEffect, Suspense } from 'react';
const Hooks2 = () => {
const [Conponent, setComponent] = useState(null);
useEffect(() => {
import('./hooks4.jsx').then((res) => {
setComponent(() => res.default); // 因为hooks4.jsx是需要default导出的那段代码,如果想使用Test那段带码就只需要把res.default改成res.Test就好了
});
}, []);
return (
<span>
hooks3
{Conponent &&<Conponent />}
</span>
);
}
export default Hooks2;
setComponent(() => res.default);
在使用set函数把得到的组件设置回去的时候必须要通过函数包裹一层，不然就会得到react还未渲染的属性而且也不能通过React.createElement进行渲染出来，只有包裹之后得到的才是想要的函数
没有使用函数进行包裹
使用函数包裹后
