Jestem nowy w bibliotece React.js i przeglądałem kilka samouczków 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 je this.setState({data: someArray});
śledzić, this.replaceState({test: someArray});
a następnie console.logged je i stwierdziłem, że state
teraz mam zarówno data
i test
.
Następnie spróbowałem this.setState({data: someArray});
śledzić je, this.setState({test: someArray});
a następnie console.logged je i stwierdziłem, że state
znowu mam oba data
i test
.
Więc jaka dokładnie jest różnica między tymi dwoma?
javascript
frontend
reactjs
myusuf
źródło
źródło
Odpowiedzi:
Z
setState
obecnym i poprzednim stanem są łączone. W programiereplaceState
wyrzuca bieżący stan i zastępuje go tylko tym, co podasz. ZwyklesetState
jest używany, chyba że naprawdę musisz z jakiegoś powodu usunąć klucze; ale ustawienie ich na false / null jest zwykle bardziej wyraźną taktyką.Chociaż jest możliwe, może się to zmienić; replaceState obecnie używa obiektu przekazanego jako stan, tj.
replaceState(x)
po jego ustawieniuthis.state === x
. Jest to trochę lżejsze niżsetState
, więc może być używane jako optymalizacja, jeśli tysiące komponentów często ustawiają swoje stany.Potwierdziłem to w tym przypadku testowym .
Jeśli twój obecny stan to
{a: 1}
i dzwoniszthis.setState({b: 2})
; kiedy stan zostanie zastosowany, będzie{a: 1, b: 2}
. Gdybyś zadzwonił,this.replaceState({b: 2})
twój stan byłby{b: 2}
.Uwaga dodatkowa: stan nie jest ustawiany natychmiast, więc nie rób tego
this.setState({b: 1}); console.log(this.state)
podczas testowania.źródło
.setState({...}, callback)
Definicja na podstawie przykładu:
Zwróć jednak uwagę na to z dokumentacji :
To samo dotyczy
replaceState()
źródło
Zgodnie z docs ,
replaceState
może się nieaktualne:źródło
Ponieważ
replaceState
jest teraz przestarzały, tutaj jest bardzo proste obejście. Chociaż prawdopodobnie rzadko zdarza się / powinieneś uciekać się do tego.Aby usunąć stan:
Lub, jeśli nie chcesz mieć wielu połączeń do
setState
Zasadniczo wszystkie poprzednie klucze w stanie teraz zwracają się
undefined
, co można bardzo łatwo przefiltrować za pomocąif
instrukcji:W JSX:
Na koniec, aby „zastąpić” stan, po prostu połącz nowy obiekt stanu z kopią poprzedniego stanu
undefined
i ustaw go jako stan:źródło