web-dev-qa-db-fra.com

setState vs replaceState dans React.js

Je suis nouveau dans la bibliothèque React.js et je parcourais quelques tutoriels et je suis tombé sur:

  • this.setState
  • this.replaceState

La description donnée n'est pas très claire (IMO).

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

De même,

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

J'ai essayé this.setState({data: someArray}); suivi de this.replaceState({test: someArray}); puis console.logged et j'ai trouvé que state avait maintenant data et test.

Ensuite, j'ai essayé this.setState({data: someArray}); suivi de this.setState({test: someArray}); puis console.logged et j'ai trouvé que state a de nouveau eu à la fois data et test.

Alors, quelle est exactement la différence entre les deux?

javascriptfrontendreactjs
93
myusuf

Avec setState, les états actuel et précédent sont fusionnés. Avec replaceState, il supprime l’état actuel et ne le remplace que par ce que vous fournissez. Habituellement, setState est utilisé sauf si vous devez réellement supprimer des clés pour une raison quelconque; mais leur attribuer la valeur false/null est généralement une tactique plus explicite.

Bien que ce soit possible, cela pourrait changer. replaceState utilise actuellement l'objet transmis en tant qu'état, à savoir replaceState(x), et une fois défini this.state === x. Ceci est un peu plus léger que setState, il pourrait donc être utilisé comme une optimisation si des milliers de composants définissent fréquemment leurs états.
Je l'ai affirmé avec ce cas de test .

Si votre état actuel est {a: 1}, Et que vous appelez this.setState({b: 2}); quand l'état est appliqué, ce sera {a: 1, b: 2}. Si vous appeliez this.replaceState({b: 2}), votre état serait {b: 2}.

Note latérale: L'état n'est pas défini instantanément, alors ne faites pas this.setState({b: 1}); console.log(this.state) lors du test.

136
Brigand

Définition par exemple:

// 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"}

Prenez note de ceci dans le docs , cependant:

setState () ne mute pas immédiatement this.state mais crée une transition d'état en attente. Accéder à this.state après avoir appelé cette méthode peut potentiellement renvoyer la valeur existante.

Il en va de même pour replaceState()

44
Grav

Selon docs , replaceState pourrait être obsolète:

Cette méthode n'est pas disponible sur les composants de classe ES6 qui étendent React.Component. Il peut être entièrement supprimé dans une future version de React.

13
Liran Brimer