28. Destrukturyzacja i spread/rest operator w ES6+

Destrukturyzacja i spread — ES6+ w React

Destrukturyzacja pozwala wyciągać wartości z obiektów i tablic do zmiennych w zwięzłej składni. Spread operator (...) kopiuje/łączy obiekty i tablice. Rest operator (...) zbiera pozostałe elementy. W React: destrukturyzacja props, spread do niemutowalnych aktualizacji stanu.

Bez destrukturyzacji każdy komponent React byłby o połowę dłuższy. const { name, email } = user zamiast const name = user.name; const email = user.email;. Spread {...prev, count: prev.count + 1} to standard niemutowalnych aktualizacji stanu.

1. Opisać destrukturyzację obiektów — z aliasami i wartościami domyślnymi
2. Opisać destrukturyzację tablic (useState, useReducer)
3. Wyjaśnić spread operator — kopiowanie, łączenie, rozwijanie
4. Wyjaśnić rest operator — zbieranie pozostałych elementów

1. Destrukturyzacja obiektów — const { name, age = 0 } = user
2. Zagnieżdżona destrukturyzacja — const { address: { city } } = user
3. Destrukturyzacja tablic — const [first, ...rest] = items
4. Spread obiektów — niemutowalna aktualizacja stanu
5. Rest w funkcji — function fn({ required, ...rest }) — zbieranie nieznanych props

• Struktura minimalna

1. Wstęp — ES6 i czytelność kodu
2. Rozdział 1: Destrukturyzacja — obiekty, tablice, zagnieżdżone
3. Rozdział 2: Spread operator — kopiowanie i łączenie
4. Rozdział 3: Rest operator i wzorce React
5. Podsumowanie
6. Bibliografia

Destrukturyzacja i spread = czytelny React kod!

Pokaż ten sam komponent React napisany bez i z destrukturyzacją. Różnica jest natychmiastowo widoczna — to najlepsza argumentacja za poznaniem tych konceptów.