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. tylko napisu BTN_1
B. wyłącznie przycisku oraz obsłużenie zdarzenia click, które ono generuje
C. wartości 0 po naciśnięciu przycisku
D. liczby kliknięć przycisku
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.
Wydaje się, że łatwo tu popaść w uproszczenia lub ulec pierwszemu wrażeniu na temat działania tego kodu, zwłaszcza jeśli nie patrzy się na całą strukturę zarówno w React, jak i Angularze. Sam przycisk z napisem BTN_1 faktycznie występuje, ale nie to jest sednem – komponenty nie ograniczają się tylko do wyświetlania przycisku. Ich główną rolą jest obsługa interakcji: kliknięcie nie tylko wywołuje zdarzenie, lecz przede wszystkim modyfikuje stan licznika i od razu aktualizuje widok. Sądząc, że program ma wyświetlać „tylko napis” lub „tylko przycisk i obsługę click”, pomija się istotę działania frameworków: dynamiczną prezentację danych w odpowiedzi na działania użytkownika. Pojawia się też czasem mylne założenie, że widok pokazuje wartość 0 po kliknięciu – to nieprawda, bo oba fragmenty kodu startują z wartością 0, ale po kliknięciu ta wartość jest zwiększana i od razu pokazuje nową liczbę kliknięć. To bardzo typowy błąd, wynikający z niezrozumienia jak aktualizowany jest stan komponentu i jak natychmiast to wpływa na renderowanie widoku. Trzeba jeszcze pamiętać, że samo „obsłużenie zdarzenia click” jest tylko częścią procesu – pełna funkcjonalność polega na wyświetleniu aktualnej liczby kliknięć, czyli dynamicznej reakcji na akcje użytkownika. Dlatego w branży kładzie się nacisk na powiązanie warstwy widoku z logiką biznesową poprzez stan komponentu – to jest podstawa nowoczesnych aplikacji. Zakładając, że chodzi tylko o statyczny element lub samo zdarzenie, zupełnie pomija się sedno tego typu zadań, gdzie właśnie dynamiczna aktualizacja UI po akcji użytkownika jest kluczowa. Takie błędne założenia często biorą się z pobieżnego czytania kodu lub nieznajomości mechanizmów reaktywności i data bindingu, które są fundamentem zarówno Reacta, jak i Angulara.