Container vs. Presentational Components

👨🏻‍🍳 Nos Workshops ✉️Besoin d'aide ?🔍Code Review

Rechercher…

Supposons que nous disposons dans notre composant app, d'une liste bookList contenant une liste d'instance d'une classe Book que nous souhaitons afficher.
book/book.ts
1
export class Book {
2
​
3
    title?: string;
4
​
5
    constructor(args: Book = {}) {
6
        this.title = args.title;
7
    }
8
​
9
}
Copied!
app.component.ts
1
import { Book } from './book/book';
2
​
3
...
4
export class AppComponent {
5
    bookList = [
6
        new Book({
7
            title: 'eXtreme Programming Explained'
8
        }),
9
        new Book({
10
            title: 'ReWork'
11
        })
12
    ];
13
};
Copied!
Laissez bien sûr l'IDE s'occuper des imports via l'auto-complete ou l'auto-import (Alt + Enter chez JetBrains).
IntelliJ Class Completion
IntelliJ Auto Import
Il serait intéressant de déléguer l'affichage de chaque book au composant book-preview que nous pourrons réutiliser plus tard dans d'autres contextes.
Dans ce cas, nous séparons les responsabilités entre le composant app et le composant book-preview.
app.component.html
1
<!-- Display one book-preview component for each book... -->
2
<!-- ...but we need to find some way to pass the book to each component. -->
3
<wt-book-preview
4
        *ngFor="let book of bookList"></wt-book-preview>
Copied!
Container Component (ou Smart Component)
Le composant app s'occupe donc de la "business logic" et sélectionne les objets book à afficher via la propriété bookList.
Il est donc un "Container Component" qui délègue l'affichage à des "Presentational Components".
Presentational Component (ou Dumb Component)
Le composant book-preview ne sait pas d'où provient le book à afficher mais il sait l'afficher.
Il est donc un "Presentational Component" qui est débarrassé de la "business logic".
Article plus détaillé sur le sujet
The Guide to Building Quality Angular 2+ Components
Wishtack
Interaction entre Composants
Il ne reste plus au composant app qu'à communiquer chaque book au composant book-preview associé. Cf. Interaction entre Composants.

Exemple

Interaction entre Composants

Dernière mise à jour 1yr ago

Copier le lien

Sommaire

Container Component (ou Smart Component)

Presentational Component (ou Dumb Component)

Article plus détaillé sur le sujet

Interaction entre Composants