Eu sou novo na Biblioteca React.js e estava lendo alguns dos tutoriais e me deparei com:
this.setState
this.replaceState
A descrição dada não é muito clara (IMO).
setState is done to 'set' the state of a value, even if its already set
in the 'getInitialState' function.
Similarmente,
The replaceState() method is for when you want to clear out the values
already in state, and add new ones.
Tentei this.setState({data: someArray});
seguido por this.replaceState({test: someArray});
e console.logged eles e descobri que state
agora tinha ambos data
e test
.
Então, eu tentei this.setState({data: someArray});
seguido por this.setState({test: someArray});
e console.logged eles e descobri que state
novamente tinha ambos data
e test
.
Então, qual é exatamente a diferença entre os dois?
javascript
frontend
reactjs
myusuf
fonte
fonte
Respostas:
Com
setState
os estados atual e anterior são mesclados. ComreplaceState
, ele elimina o estado atual e o substitui apenas pelo que você fornece. NormalmentesetState
é usado, a menos que você realmente precise remover as chaves por algum motivo; mas defini-los como falso / nulo geralmente é uma tática mais explícita.Embora seja possível, pode mudar; replaceState atualmente usa o objeto passado como o estado, ou seja
replaceState(x)
, uma vez definidothis.state === x
. Isso é um pouco mais leve do quesetState
, portanto, poderia ser usado como uma otimização se milhares de componentes configurassem seus estados com frequência.Eu afirmei isso com este caso de teste .
Se o seu estado atual é
{a: 1}
, e você ligathis.setState({b: 2})
; quando o estado for aplicado, será{a: 1, b: 2}
. Se você ligassethis.replaceState({b: 2})
seu estado seria{b: 2}
.Nota lateral: o estado não é definido instantaneamente, então não faça isso
this.setState({b: 1}); console.log(this.state)
durante o teste.fonte
.setState({...}, callback)
Definição por exemplo:
Observe isso na documentação :
O mesmo vale para
replaceState()
fonte
De acordo com os documentos ,
replaceState
pode ficar obsoleto:fonte
Como
replaceState
agora está obsoleto, aqui está uma solução alternativa muito simples. Embora seja provavelmente muito raro você recorrer / deva recorrer a isso.Para remover o estado:
Ou, alternativamente, se você não quiser ter várias chamadas para
setState
Essencialmente, todas as chaves anteriores no estado agora retornam
undefined
, que podem ser facilmente filtradas com umaif
instrução:Em JSX:
Finalmente, para "substituir" o estado, basta combinar o novo objeto de estado com uma cópia do antigo estado que foi
undefined
e defini-lo como estado:fonte