当前位置：首页 > news >正文

什么是 Angular 开发中的 Dumb components

news 来源：原创 2024/9/30 21:12:29

Dumb components，在 Angular 开发中也被称为 Presentational components，它们的主要职责是通过展示数据和触发事件，把业务逻辑和 UI 表现分离开来。Dumb components 只通过 @Input() 接收数据，@Output() 向外发送事件，不负责处理任何业务逻辑，这些逻辑由 Smart components 或服务来承担。这是典型的单一职责原则的实现，能够提高代码的可维护性和可测试性。

Dumb components 的核心思想是让组件尽可能地简洁，只负责渲染自己所需的内容，以及通过输出事件来通知外界操作。这种组件完全与业务逻辑解耦，因此它们不依赖于业务状态的变化，只专注于 UI 的展示。当业务逻辑发生变化时，不需要对它们做任何改动。

使用 Dumb components 有几个好处：

提高代码复用性：因为这些组件只负责渲染 UI，所以可以在多个地方重用。
易于测试：由于没有业务逻辑，只需测试组件的输入输出和渲染结果即可。
易于维护：每个组件功能单一，当 UI 或业务逻辑变化时只需修改与之相关的组件，降低了出错的概率。

下面是一个简单的例子，通过具体代码来说明什么是 Dumb components 以及如何使用。

例子：一个用户卡片组件

我们要实现一个用户卡片组件，它只负责展示用户信息，并提供一个按钮来触发“删除”操作。所有的用户数据和删除操作的业务逻辑都在父组件中管理。

Step 1: 创建 Dumb 组件

首先我们创建一个 UserCardComponent，它接受用户数据并展示，同时提供一个输出事件。

// user-card.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';@Component({selector: 'app-user-card',templateUrl: './user-card.component.html',styleUrls: ['./user-card.component.css']
})
export class UserCardComponent {@Input() user: any;@Output() delete = new EventEmitter<void>();onDelete() {this.delete.emit();}
}

<!-- user-card.component.html -->
<div class="user-card"><h3>{{ user.name }}</h3><p>{{ user.email }}</p><button (click)="onDelete()">Delete</button>
</div>

这里 UserCardComponent 仅负责展示用户信息，并且提供了一个 onDelete 方法来触发 delete 事件。组件的输入属性 user 是一个对象，包含用户的 name 和 email 信息。

Step 2: 在父组件中使用 Dumb 组件

创建一个父组件 UserListComponent 来管理用户列表和删除操作。

// user-list.component.ts
import { Component } from '@angular/core';@Component({selector: 'app-user-list',templateUrl: './user-list.component.html',styleUrls: ['./user-list.component.css']
})
export class UserListComponent {users = [{ name: 'John Doe', email: 'john.doe@example.com' },{ name: 'Jane Doe', email: 'jane.doe@example.com' }];deleteUser(index: number) {this.users.splice(index, 1);}
}

<!-- user-list.component.html -->
<div><app-user-card*ngFor="let user of users; let i = index"[user]="user"(delete)="deleteUser(i)"></app-user-card>
</div>

在 UserListComponent 中，维护了一个用户数组 users。为了删除用户，我们定义了一个 deleteUser 方法，并在模板中通过 Angular 的 *ngFor 指令渲染多个 UserCardComponent。当 UserCardComponent 触发 delete 事件时，调用父组件的 deleteUser 方法进行相应处理。

Dumb 组件的进一步优化

为了更通用化和可维护，可以把输入数据的类型和输出事件的类型定义更加明确。

定义用户模型

// user.model.ts
export interface User {name: string;email: string;
}

在组件中使用模型

// user-card.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { User } from './user.model';@Component({selector: 'app-user-card',templateUrl: './user-card.component.html',styleUrls: ['./user-card.component.css']
})
export class UserCardComponent {@Input() user: User;@Output() delete = new EventEmitter<void>();onDelete() {this.delete.emit();}
}

在父组件中使用模型

// user-list.component.ts
import { Component } from '@angular/core';
import { User } from './user.model';@Component({selector: 'app-user-list',templateUrl: './user-list.component.html',styleUrls: ['./user-list.component.css']
})
export class UserListComponent {users: User[] = [{ name: 'John Doe', email: 'john.doe@example.com' },{ name: 'Jane Doe', email: 'jane.doe@example.com' }];deleteUser(index: number) {this.users.splice(index, 1);}
}