React（17）异步组件

26、异步组件
当在React里使用异步组件时，核心知识是两个：

webpack 如何异步加载其他模块：通过 require(['xxx'], function(module){})来实现；
React 里如何使用异步加载的这个模块：参考正常使用模块时的做法；

【异步加载】

关于 webpack 的异步加载，可以查看我写的这一篇异步加载实战DEMO.

简单来说，就是 require 的参数一，从字符串变为数组，然后参数二是一个回调函数，函数的参数，就是你异步加载的模块。

因此 拿到参数 等于 获得模块。

【React里如何使用】

我们要异步获得这个模块；
我们可以参考高阶组件的用法，来使用这个模块（函数返回一个类，赋值给某个变量，然后该变量作为JSX的标签使用）；
先给一个简单版本：

class RefsDemo extends React.Component {
constructor() {
super()
this.state = {
myComponent: null
}
this.load = this.load.bind(this)
}

render() {
return <div>
{/* 点击执行 load 方法 */}
<button onClick={this.load}>点击加载异步组件</button>
{/* 变量存在时（非空，使用标签作为JSX的标签名（该变量已被赋值异步模块）；否则使用null（即无DOM） */}
{
this.state.myComponent ? <this.state.myComponent></this.state.myComponent> : null
}
</div>
}

load() {
// 这是一个异步行为，所以需要在回调函数里获取这个模块
require(['./learner.js'], Component => {
// 赋值给 state 变量
this.setState({
// 加载到的模块存储在 Comment.default 中（因为是通过 export default 导出的）
myComponent: Component.default
})
})
}
}
思路是：

用 state 变量 myComponent 存储模块，初始为空（不显示也不加载）；
当点击按钮时，异步加载模块 './learner.js'，回调函数传参获得该模块；
将该模块赋值给 state 变量 myComponent，触发 state 改变时的生命周期（会触发render方法）；
render 重新渲染时，发现 this.state.myComponent 隐式转换后非 false，因此使用其 JSX 标签（即将异步组件嵌入到当前组件中）；
于是将异步组件嵌入了当前组件中，实现了 React 组件的异步加载；
其他的比较好理解，比较别扭的是 JSX 语法：

{
this.state.myComponent ? <this.state.myComponent></this.state.myComponent> : null
}
之所以可以这么写，参考本系列的 【22】 的第一小节，即组件被赋值给对象的属性时（这里体现的是 this 的 state 属性的 myComponent 属性），因此不需要大写，可以直接用变量名作为标签名。

进阶——异步组件加载器：

问题：

以上的写法还是太过于复杂；
需要用 state 属性来控制组件是否显示；
需要用一个变量存储该模块，并在JSX语法里用这个变量作为标签名；
要写一个 load 方法，用于加载异步组件；
总而言之，不够智能，不优雅；

目标：

写一个异步组件加载器；
实现以下功能：
给其传一个函数，如：const Learner = resolve => require(['./learner.js'], resolve)，这个函数的原型是上面的 require(['./learner.js'], Component => {})；
再给其传一个变量 displayComponent，用于控制这个组件是否显示；
当第一次设置 displayComponent 为 true，且组件未加载时，则加载该组件；
为了防止组件重复加载，因此组件内部变量 this.state.amount 负责表示当前组件状态（未加载，加载中，加载完毕）；
组件何时显示：组件加载完毕（this.state.component） && 父组件控制该组件是否显示（this.state.displayComponent）；
因此，父组件只需要干两件事情就行了：

传一个柯里化处理后的异步组件加载函数；
一个变量 displayComponent 控制该异步组件是否显示（首次显示时自动加载）；
如
代码：

app.js 父组件内的代码

// 引入异步组件加载器
import AsyncLoad from './asyncLoader.js'

// 异步组件加载函数封装
const Leaner = resolve => require(['./learner.js'], resolve)

// 以下是父组件的 render 方法的异步组件加载器的 JSX 标签
<AsyncLoad modules={Leaner} displayComponent={this.state.displayComponent}></AsyncLoad>

asyncLoader.js 异步组件加载器中的代码

具体解释请看代码注释

/**
* Created by 王冬 on 2018/2/8.
* QQ: 20004604
* weChat: qq20004604
* 异步加载工厂组件
*/
import React from "react";

const loadingStatus = {
notLoaded: 0,
loading: 1,
loaded: 2
}

export default class AsyncLoader extends React.Component {
constructor() {
super()
this.state = {
amount: loadingStatus.notLoaded, // 0 表示未加载，1表示加载中，2表示加载完毕。没有考虑加载失败的问题（并不难）
displayComponent: false, // 是否显示组件
component: null // 异步组件被赋值给这个变量
}
}

// 生命周期函数，父组件更改 state 后会触发这个函数
componentWillReceiveProps(nextProps) {
// 如果没有modules，则直接报错
if (!nextProps.modules) {
return console.error('你没有传值 modules 给【异步组件加载器】')
}
// 如果 control 值为 true，且之前未加载过组件（用 amount === 0 来表示）
if (nextProps.displayComponent && this.state.amount === 0) {
console.log('开始加载组件')
// 那么加载组件
this.setState({
amount: loadingStatus.loading // 表示加载中
})
nextProps.modules(module => {
if (!module.default) {
return console.error('你可能加载多个异步组件，或者加载的组件并非 React 的组件')
}
// 将异步赋值给 state 相应的变量
console.log('组件加载完毕')
this.setState({
amount: loadingStatus.loaded, // 加载完毕
component: module.default
})
})
}

this.setState({
displayComponent: nextProps.displayComponent
})
}

render() {
/* <React.Fragment> 是 React 的包裹容器（类似 Vue 的 <template> 标签） */
return <React.Fragment>
{/* 只有当前显示组件，并且组件加载完毕了，才显示该组件 */}
{
this.state.displayComponent && this.state.component ?
<this.state.component></this.state.component> : null
}
</React.Fragment>
}
}
---------------------
作者：qq20004604
来源：CSDN
原文：https://blog.csdn.net/qq20004604/article/details/79318253
版权声明：本文为博主原创文章，转载请附上博文链接！