Quelle est la différence entre cet état et ceci. Définir dans ReactJS?

Voici ce que le React dit:

Ne this.state JAMAIS this.state directement, car appeler setState () après peut remplacer la mutation que vous avez faite. Traitez cet état comme s'il était immuable.

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

Il n'y a aucune garantie de fonctionnement synchrone des appels pour configurer l'état et les appels peuvent être mis en lots pour des gains de performances. setState() déclenche toujours un re-rendu à moins que la logique de rendu conditionnel ne soit implémentée dans shouldComponentUpdate() .

Si des objets mutables sont utilisés et que la logique ne peut pas être implémentée dans shouldComponentUpdate() , appeler setState() uniquement lorsque le nouvel état diffère de l'état précédent évitera les re- setState() inutiles.

Il est toujours judicieux d'utiliser les API de la manière dont elles ont été conçues. Si les docteurs disent ne pas muter votre état, alors il vaut mieux ne pas muter votre état.

Alors que setState() pourrait être techniquement asynchrone, il n'est certainement pas lent de manière visible. La fonction render() du composant sera appelée dans un ordre assez court.

Un inconvénient de l'état de configuration directement est que les méthodes de cycle de vie de React – shouldComponentUpdate() , componentWillUpdate() , componentDidUpdate() – dépendent des transitions d'états appelées avec setState() . Si vous modifiez l'état directement et appelez setState() avec un objet vide, vous ne pouvez plus mettre en œuvre ces méthodes.

Un autre est que c'est juste un mauvais style de programmation. Vous faites dans deux déclarations ce que vous pourriez faire en un seul.

En outre, il n'y a aucun avantage réel ici. Dans les deux cas, render() ne sera pas déclenché qu'après que setState() (ou forceUpdate() ) soit appelé.

Vous prétendez avoir besoin de le faire sans expliquer vraiment ce dont il a besoin. Peut-être souhaitez-vous détailler votre problème un peu plus. Il y a probablement une meilleure solution.

Il est préférable de travailler avec le cadre plutôt que contre celui-ci.

METTRE À JOUR

À partir des commentaires ci-dessous:

Le besoin est que je veux utiliser le hasSubmit modifié dans ci-dessous.

OK je comprends maintenant. Si vous devez utiliser immédiatement la future propriété d'état, votre meilleur pari est simplement de le stocker dans une variable locale.

 const hasSubmit = false; this.setState({ hasSubmit: hasSubmit }); if (hasSubmit) { // Code that will use `hasSubmit` ... 

Vous devez utiliser this.forceUpdate() dans le premier exemple pour forcer la mise à jour de l'état. Par exemple:

 this.state.hasSubmit = false; this.forceUpdate(); 

Mais il est préférable d'utiliser this.setState car il s'agit d'un mécanisme inédit de vérification de l'état du moteur React qui est meilleur que la mise à jour forcée.

Si vous mettez simplement à jour n'importe quel this.state de this.state directement sans que setState réagisse, le mécanisme de rendu ne saura pas que certains paramètres d'état soient mis à jour.

Si vous souhaitez modifier l'état et déclencher un re-render en réagissant:

Utilisez le deuxième code BTW: ce code n'utilise pas le rappel SETState :

  this.setState({ hasSubmit: false, }); 

Problèmes / erreurs avec le premier code:

  this.state.hasSubmit = false // Updates state directly: // You are not supposed to do this // except in ES6 constructors this.setState({}) // passes an empty state to react. // Triggers re-render without mutating state 

Si vous souhaitez modifier l'état sans déclencher de redirection: mettez le deuxième code dans componentWillReceiveProps comme décrit ici dans les documents de réaction officiels.

Vous ne devriez jamais ignorer les conseils de documentation. Au moment de l'écriture, setState autorise le second argument qui est une fonction de rappel lorsque le setState et le re-render ont fini. Étant donné que vous ne nous fournissez jamais comment votre code utilisera une valeur de soumission, je pense que d'autres peuvent trouver cela utile lorsque vous souhaitez vous assurer que hasSubmit a été changé.

this.setState maintient le cycle de vie de la composante de réaction et ne semble pas être une variable mutante (même si elle fait internement l'état de mutation). Ainsi, le flux aller simple dans le cycle de réaction est maintenu sans effets secondaires.

La mise en garde consiste à utiliser this.setState ne fonctionne pas avec les constructeurs dans les classes ES6. Nous devons utiliser this.state = pattern plutôt que this.setState dans ES6 constructors