react异步加载组件，分模块加载，提高打开性能

react异步加载的方法很多，这里只说一种，因为这一种直接使用react的特性就可以了，不需要另外配置webpack，就是用一个小技巧去import组件，所以方便，实现简单。

写一个组件A，这个组件内部会加载另外的组件B，用B的内容完全覆盖到A上面，
路由需要打开A的时候，内容加载的B才会调起，达到异步效果，而B就是我们真正想打开的组件，

文章最后给返回组件A的代码。

直接看上面截图，asyncComponent是一个函数，调用它会返回组件A，A内部加载我们想要的组件B，asyncComponent算是一个工厂函数，可以返回组件A，构造组件A需要传进去一个函数，这个函数直接返回我们想要的组件B。

asyncComponent会用拿到的组件B来渲染组件A，所以虽然打开的是组件A，但组件A本身是空的，把组件B完全融合进去之后，其实A就变成跟B一样了，

这算是一种mixin技术。

代码中其中一个红框圈出来的AsyncStart，就是asyncComponent返回的组件，构造时传给它的函数返回的就是我们想要import的组件start，asyncComponent函数内部把start融入AsyncStart后再返回，这样，我们得到跟start一样的另一个组件。

再看看路由，像普通组件那样引用 AsyncStart就行，最后构建的结果是多个js文件（左边文件列表圈出），用浏览器打开页面后可以看引用的源文件，每次打开一个新页面，才引入一个新的js，确实是异步按需加载的，如下图：

下面给出asyncComponent组件的代码：

import React, {Component} from 'react';

const asyncComponent = (importComponent) => {
	return class extends Component {
		state = {
			component: null
		}
		
		componentDidMount() {
			importComponent() //我们传进来的函数返回我们想要的组件B
				.then(cmp => {
					this.setState({component: cmp.default}); //把组件B存起来
				});
		}
		
		render() {
			const C = this.state.component; //渲染的时候把组件B拿出来
			return C ? <C {...this.props}/> : null; //返回的其实就是组件B，并且把传给A的属性也转移到B上
		}
	}
};

export default asyncComponent;

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/u012560340/article/details/83146465
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-03-01 21:34:17
阅读 ( 1172 )
分类：

react异步加载组件，分模块加载，提高打开性能

react异步加载组件，分模块加载，提高打开性能

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看