setState vs replaceState w Reaccie.js

Question

setState vs replaceState w Reaccie.js

Jestem nowy, by reagować.js Library i przeglądałem kilka tutoriali i natknąłem się na:

this.setState
this.replaceState

Podany opis nie jest zbyt jasny (IMO).

setState is done to 'set' the state of a value, even if its already set 
in the 'getInitialState' function.

Podobnie,

The replaceState() method is for when you want to clear out the values 
already in state, and add new ones.

Próbowałem this.setState({data: someArray}); następnie this.replaceState({test: someArray}); a potem konsola.po zalogowaniu okazało się, że state Teraz ma zarówno data, jak i test.

Wtedy, próbowałem this.setState({data: someArray}); następnie this.setState({test: someArray}); i wtedy konsola.zapisałem je i okazało się, że state Ponownie miał zarówno data i test.

Więc, jaka dokładnie jest różnica między tymi dwoma ?

92

javascript reactjs frontend

Author: myusuf, 2014-04-25

Source

3 answers

Definicja na przykładzie:

// let's say that this.state is {foo: 42}

this.setState({bar: 117})

// this.state is now {foo: 42, bar: 117}

this.setState({foo: 43})

// this.state is now {foo: 43, bar: 117}

this.replaceState({baz: "hello"})

// this.state. is now {baz: "hello"}

Zwróć uwagę na to z docs , chociaż:

SetState() nie od razu to mutuje.stan, ale tworzy w oczekiwaniu na zmianę stanu. Dostęp do tego.stan po wywołaniu tego metoda może potencjalnie zwrócić istniejącą wartość.

To samo dotyczy replaceState()

40

Author: Grav,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-24 08:05:12

Zgodnie z docs, replaceState może być deprecated:

Ta metoda nie jest dostępna w komponentach klasy ES6, które rozszerzają React.Komponent. Może zostać całkowicie usunięty w przyszłej wersji Reacta.

11

Author: Liran Brimer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-24 21:59:26

score 133 · Accepted Answer

Z setState obecne i poprzednie Stany są połączone. Z replaceState, wyrzuca bieżący stan i zastępuje go tylko tym, co podajesz. Zwykle używane jest setState, chyba że naprawdę musisz usunąć klucze z jakiegoś powodu; ale ustawienie ich na false / null jest zwykle bardziej wyraźną taktyką.

Chociaż jest to możliwe, może się zmienić; replaceState obecnie używa obiektu przekazanego jako stan, tzn. replaceState(x), a po jego ustawieniu this.state === x. Jest trochę lżejszy od setState, więc może być używany jako optymalizacja, jeśli tysiące komponentów często ustawia swoje stany.
_{potwierdziłem to za pomocą tego przypadku testowego.}

Jeśli twoim obecnym stanem jest {a: 1}, A wywołujesz this.setState({b: 2}); gdy stan zostanie zastosowany, będzie to {a: 1, b: 2}. Jeśli zadzwonisz this.replaceState({b: 2}) twój stan będzie {b: 2}.

Uwaga: stan nie jest ustawiany natychmiast, więc nie rób this.setState({b: 1}); console.log(this.state) podczas testowania.