Pytanie 1
Kod w bibliotece React.js oraz w frameworku Angular, który został zaprezentowany, ma na celu wyświetlenie
| Fragment kodu React.js: | |
state = { zm1: 0 }; hanleEv = () => { this.setState({zm1: this.state.zm1 + 1}); } render() { return (<div> <span>{this.state.zm1}</span> <button onClick={this.handleEv}>BTN_1</button> </div>); } | |
| Fragment kodu Angular: | |
@Component({ selector: 'sel1', template: `<span>{{ zm1 }}</span> <button (click)="onBtnCilcked()">BTN_1</button>` }) export class Licznik1Component { zm1 = 0; onBtnCilcked() { this.zm1++; } } |
A. wyłącznie przycisku oraz obsłużenie zdarzenia click, które ono generuje
B. liczby kliknięć przycisku
C. wartości 0 po naciśnięciu przycisku
D. tylko napisu BTN_1
Ten kod, zarówno w React.js jak i w Angularze, jest klasycznym przykładem prostego licznika. To, co tu się dzieje, to tak naprawdę zliczanie kliknięć użytkownika w przycisk. Za każdym razem, gdy naciśniesz BTN_1, zmienna (zm1) jest inkrementowana – czyli po prostu zwiększana o jeden. W React za to odpowiada metoda setState, która zmienia stan komponentu – dzięki temu interfejs od razu aktualizuje się bez przeładowywania strony. W Angularze natomiast działa to przez tzw. dwukierunkową komunikację z template’em i automatyczną detekcję zmian – metoda onBtnCilcked w komponencie modyfikuje zmienną, a framework sam aktualizuje widok. Z mojego doświadczenia, takie podejście do zarządzania stanem to podstawa w nowoczesnych aplikacjach, szczególnie jeśli chodzi o responsywność i natychmiastową reakcję na akcje użytkownika. Liczniki są zresztą jednym z pierwszych przykładów, jakie się pisze ćwicząc frameworki frontendowe, bo świetnie pokazują, jak działa przepływ danych i odświeżanie elementów UI. Warto dodać, że trzymanie licznika kliknięć w stanie komponentu (a nie np. jako zmienną globalną) jest zgodne z dobrymi praktykami – bo ogranicza zakres danych i ułatwia zarządzanie większymi aplikacjami. Takie wzorce potem można z powodzeniem przenieść do trudniejszych projektów, na przykład liczników, koszyków, liczby zamówień czy nawet zaawansowanych dashboardów. W praktyce ten mechanizm inkrementowania wartości po kliknięciu użytkownika jest jednym z najczęściej używanych w interaktywnych aplikacjach internetowych.
