异步组件需要解决的问题

• 允许用户指定加载出错时要渲染的组件
• 允许用户指定Loading组件，以及展示该组件的延迟时间
• 允许用户设置加载组件的超时时长
• 组件加载失败时，为用户提供重试的能力

异步组件实现原理

1.封装defineAsyncComponent函数

异步组件本质上是通过封装手段来实现友好的用户接口，从而降低用户的使用复杂度。

我们将组件的加载器传递到一个异步组件处理函数defineAsyncComponent中，defineAsyncComponent是一个高阶组件，它的基本实现如下：

defineAsyncComponent会返回一个组件类型，从而使异步组件可以和普通组件一样被正常挂载。

2.超时与error

除了基本的加载异步组价需求外，我们还需要处理组件的超时和加载失败的情况。

• loader：指定异步的加载器
• timeout：单位ms，指定超时时长
• errorComp：指定加载错误是加载的组件

代码实现如下：

除了超时导致加载组件失败之外，我们还需要对异步组件的加载错误做更加细粒度的处理，比如说加入组件加载过程中，出现报错信息，我们可以将报错信息传递给error组件，来进行更加细粒度的错误提示；或者说在网络连接失败的时候，因为网络错误并不只有超时一种。

3.延迟和Loading组件

异步组件受网络影响较大，加载过程可能时快时慢，当加载缓慢的时候，可能会给用户带来一种“卡死”的感觉，而加载过快则可能出现闪烁的情况。对此我们可以考虑在加载过程中添加一个Loading组件，来提供更好的用户体验。

• delay：延迟展示loading组件的时长
• loadingComp：loading组件

Loading状态的具体实现如下：

函数式组件

一个函数式组件本质上就是一个普通函数，该函数的返回值是一个虚拟DOM。同时它也可以接收props参数。