Stan aktualizacji

  • 4 min

Ponieważ stan w rozwiązaniu React jest niezmienny, aby zmodyfikować wartość obiektu stanowego, zastępujemy go nowym obiektem. Dlatego unikamy całej klasy usterek, w których obiekt może być w nieprawidłowym stanie, ponieważ jest edytowany.

Kopiowanie obiektów

Typy pierwotne, takie jak wartości logiczne lub liczby, są obiektami opartymi na wartościach, a nie obiektami referencyjnymi. Dlatego każda zmiana automatycznie zastępuje cały obiekt.

Ciągi zachowują się podobnie, ponieważ są niezmienne. Modyfikujemy ciąg, zastępując go nową wartością.

let message = 'Hello, ';
message = message + 'world!';

Podczas pracy z obiektem musimy utworzyć nowe wystąpienie, aby zapewnić niezmienność. Najczęstszą składnią tworzenia kopii obiektu jest składnia spreadu, nazywana również operatorem spreadu.

let message = {
    text: 'Hello, world',
    color: 'red'
}

let messageCopy = { ...message };

Modyfikowanie poszczególnych właściwości

Zazwyczaj musimy zaktualizować tylko podzbiór właściwości dla obiektu. Tworzenie kopii i modyfikowanie każdej właściwości stanie się żmudne.

W poprzedniej składni zwróć uwagę, że tworzymy nowy obiekt JSON przy użyciu nawiasów klamrowych ({ }). Operator spreadu może służyć do utworzenia początkowej wersji nowego obiektu. Pozwala nam to określić zaktualizowane wartości dla niektórych właściwości. Jeśli mamy nową wartość, color ale chcemy zachować tekst, na przykład możemy użyć następującego kodu.

let message = {
    text: 'Hello, world',
    color: 'red'
}

let messageCopy = {
    ...message,
    color: 'green'
};

text W tym miejscu zachowa oryginalną wartość. Wartość color jest aktualizowana na zielono.

// new object
{
    text: 'Hello, world',
    color: 'green'
}