Angular React Vue 比较 – 组件篇之异步组件

小白马编程

已于 2024-03-10 20:30:18 修改

阅读量759

点赞数 25

分类专栏： Angular-React-Vue 文章标签： vue.js react.js angular.js javascript 前端

于 2024-03-08 11:48:58 首次发布

本文链接：https://blog.csdn.net/zhangjunfa123456/article/details/136557929

版权

Angular-React-Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了Angular17中新增的可延迟视图功能，以及如何使用@defer实现异步组件加载，同时对比了React的lazy和Vue的defineAsyncComponent在异步组件加载方面的实现。

摘要由CSDN通过智能技术生成

在大型应用中我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件，这个时候我们就用到了异步组件。

Angular 的异步组件

在 Angular v17 之前的版本中并没有异步组件的实现方法，类似的功能被称之为懒加载模块。要使用懒加载模块，需要配合路由使用。Angular 并不是一个渐近式的框架，它拥有一个完整的应用生态，路由的概念暂时不在本系列文章的讨论范围。关于懒加载模块的介绍请参考惰性加载特性模块。

在 v17 版本中，Angular 新增一个 可延迟视图 的功能，通过这个功能我们可以轻松实现异步组件的加载。这个功能是使用 @defer 块来实现的，并且它拥有 @placeholder @loading @error 这几个子块。

下面的例子展示了如何异步加载广告条组件。

ad.component.ts 文件

import { Component } from '@angular/core';

@Component({
  selector: 'app-ad',
  template: `
    <h2>异步加载广告条</h2>
    <label>
      <input type="checkbox" [(ngModel)]="showAd" />
      允许显示广告
    </label>
    <div class="ad">
      @defer (when showAd) {
        <app-ad-a></app-ad-a>
      }
    </div>
  `
})
export class AdComponent {
  showAd = false;
}

ad.banner.component.ts 文件

import { Component } from '@angular/core';

@Component({
  selector: 'app-ad-banner',
  template: `
    <div>
      <p>Ad Banner</p>
    </div>
  `
})
export class AdBannerComponent {

}

如果需要使用 @defer 的相关子块，可参考下面的代码：

// @placeholder
@defer {
  <large-component />
} @placeholder (minimum 500ms) {
  <p>Placeholder content</p>
}

// @loading
@defer {
  <large-component />
} @loading (after 100ms; minimum 1s) {
  <img alt="loading..." src="loading.gif" />
}

// @error
@defer {
  <calendar-cmp />
} @error {
  <p>Failed to load the calendar</p>
}

React 的异步组件

在 React 中，使用 lazy 方法和 Suspense 内置组件来实现异步组件的加载。

下面的例子展示了如何异步加载广告条组件。

Ad.js 文件

import React from "react";
import { useState, lazy, Suspense } from 'react';

import Loading from './Loading';
const AdBanner = lazy(() => delayForDemo(import('./AdBanner.js')));

export default function Ad() {
    const [showAd, setShowAd] = useState(false);
    
    return (
      <div>
        <h2>异步组件</h2>
        <label>
          <input type="checkbox" checked={showAd} onChange={e => setShowAd(e.target.checked)} />
          允许显示广告
        </label>
        <hr />
        {showAd && (
          <Suspense fallback={<Loading />}>
            <h2>广告</h2>
            <AdBanner />
          </Suspense>
        )}
      </div>
    )
}

// 添加一个固定的延迟时间，以便你可以看到加载状态
function delayForDemo(promise) {
  return new Promise(resolve => {
    setTimeout(resolve, 2000);
  }).then(() => promise);
}

Loading.js 文件

export default function Loading() {
  return <p><i>Loading...</i></p>;
}

AdBanner.js 文件

export default function AdBanner() {
    return (
      <div>
        <p>Ad Banner</p>
      </div>
    )
}

Vue 的异步组件

在 Vue 中，使用 defineAsyncComponent 方法来异步加载组件，它也可以配合 <Suspense> 内置组件来使用，不过 <Suspense> 目前尚是一项实验性功能，下面的例子中我们暂且不使用 <Suspense> 。

<script setup>
import { defineAsyncComponent } from 'vue'

const AdminPage = defineAsyncComponent(() =>
  import('./components/AdminPageComponent.vue')
)
</script>

<template>
  <AdminPage />
</template>