Inteligentne i głupie komponenty w Angular

Różne typy komponentów w Angular

Kiedy zaczynasz tworzyć aplikacje za pomocą struktur UI, takich jak Angular i React, pierwszą rzeczą, z którą się spotkasz, jest koncepcja komponentów. Komponenty mogą wydawać się dość proste, ale jest w tym o wiele więcej niż na pierwszy rzut oka. Struktura komponentów dzieli stronę na fragmenty i pomaga zarządzać stroną w bardzo elastyczny sposób poprzez hermetyzację wszystkich stylów, znaczników i logiki biznesowej w każdym komponencie, a następnie scalanie ich w celu zbudowania aplikacji.

Mając to na uwadze, zagłębiając się w komponenty, możesz zapytać:

Czy istnieją różne typy komponentów?

Tak, istnieją dwa rodzaje, a raczej koncepcje komponentów.

• Inteligentne komponenty
• Głupie komponenty

Głupie komponenty

W prawdziwym świecie często uważamy tych ludzi za Głupich, którzy nie mają poczucia celu lub są zależni od innych, aby iść naprzód lub uzyskać rzeczy. To jest dokładnie to, czym jest głupi komponent w świecie programowania. Komponent, który sam nie robi absolutnie nic i jest zależny od Smarter Components.

Wszystko, co robią Dumb Components, to prezentowanie się w DOM. Dlatego nazywane są również „ Komponentami prezentacyjnymi ” lub czymś, co nazywa się „ Komponenty izolowane ”.

import{ Component, Input, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-book-list’,
templateUrl: ‘./book-list.component.html’,
styleUrls: [‘./book-list.component.css’]
})
export class BookListComponent implements OnInit {
@Input(‘book’) book: any[];
constructor() { }
ngOnInit() {
}
}

<div class="books-list-container">
<h3>{{book.volumeInfo.title}}</h3>
<p>{{book.volumeInfo.authors[0]}}</p>
<p>{{book.description}}</p>
</div>

Inteligentniejsze komponenty

Komponenty inteligentne to te komponenty, które wiedzą, jak obchodzić się z danymi, jak pobierać dane z usług, jak wchodzić w interakcje z usługami i śledzić stan oraz dbać o to, jak aplikacja działa jako całość. Nazywa się je kontenerami, ponieważ wysyłają dane do głupich komponentów za pośrednictwem powiązań właściwości.

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders} from '@angular/common/http';
import {map} from 'rxjs/operators';
import { Observable } from 'rxjs';
@Component({
selector: 'app-books',
templateUrl: './books.component.html',
styleUrls: ['./books.component.css']
})
export class BooksComponent implements OnInit {
private API_KEY:string = 'API_KEY';
book: Observable<any[]>;
constructor(private _http: HttpClient) { }
ngOnInit() {
const URL = 'https://www.googleapis.com/books/v1';
//Fetch All Books from API
//@Params = URL: String
this.fetchBooks(URL);
}
fetchBooks(URL: string){
this.book = this._http.get<any>(`${URL}/q=&key=${this.API_KEY}`,             {headers}).pipe(
   map(resp=>{
    return resp.items;
   });
 );
}}

<app-book-list [book]="book | async"></app-book-list>

Wniosek

Korzystając z tych koncepcji, rozdzieliliśmy kod logiki biznesowej i kod prezentacji między inteligentne i głupie komponenty. Ten stażysta pozwala jednemu komponentowi wykonać wszystkie ciężkie prace, pozostawiając innym płynne wyświetlanie danych.

To wszystko, mam nadzieję, że ten post pomógł w zrozumieniu tych koncepcji, jeśli nie zapomnij nacisnąć przycisku klaśnięcia. Oto link Github do kodu:

Możesz także przeczytać mój drugi artykuł na temat komponentu internetowego, jeśli chcesz.

Szczegółowe informacje o składnikach sieci Web

Wreszcie! Dziękuję za przeczytanie i życzę miłego kodowania!