Comment obtenir l'état en réaction

Comment obtenir l'état en réaction : ouvrez d'abord le fichier de code de réaction correspondant ; puis en réaction, vous pouvez directement obtenir l'état via "this.state.{property}".

L'environnement d'exploitation de ce tutoriel : système Windows7, version React17.0.1, ordinateur Dell G3.

Comment mettre l'état en réaction ?

En réaction, vous pouvez obtenir directement l'état via this.state.{property}, mais lorsque nous modifions l'état, il y a souvent de nombreux pièges auxquels il faut prêter attention.

Voici trois pièges courants :

1. L'état ne peut pas être modifié directement.

Le composant modifie l'état et ne relancera pas le rendu. Par exemple :

//错误
this.state.title='React';
正确修改方式是使用setState（）；
//正确
this.setState({title:'React'});

2. L'état est mis à jour de manière asynchrone

Lorsque setState est appelé, l'état du composant ne changera pas immédiatement, mais l'état à modifier sera mis dans la file d'attente des événements, while réagir Le timing d'exécution réel sera optimisé et, pour ses propres raisons de performances, plusieurs modifications d'état setState peuvent être fusionnées en une seule modification d'état. Par conséquent, ne vous fiez pas à l'état actuel pour calculer l'état suivant, car lorsque la modification de l'état est réellement effectuée, il n'est pas garanti que le this.state dépendant soit le dernier état, car la réaction elle-même fusionnera plusieurs états en un seul, et cela .state sera toujours L'état avant plusieurs modifications d'état ne peut pas non plus s'appuyer sur les accessoires actuels pour calculer l'état suivant, car la mise à jour des accessoires est également asynchrone. Pour les applications e-commerce, dans le panier, si vous cliquez une fois sur le bouton d'achat, la quantité achetée sera augmentée de 1. Si vous cliquez dessus deux fois de suite, elle sera augmentée de 2. Lorsque React est fusionné et modifié une fois, cela équivaut à exécuter le code suivant :

Object.assign(
previousState,
{quantity:this.state.quantity+1},
{quantity:this.state.quantity+1},
)

Ainsi l'opération précédente est écrasée, et la quantité finale d'achat n'est augmentée que de 1. A ce moment, vous pouvez utiliser une autre fonction comme paramètre setState .Cette fonction a deux paramètres, le premier paramètre est le pré-état actuel de l'état précédent (l'état avant la modification de l'état de ce composant) du dernier état (l'état après la mise à jour de l'état de ce composant), et le deuxième paramètre est les derniers accessoires. . La liste est la suivante :

//正确
this.setState((preState,props)=>({
counter:preState.quantity+1
}))

3. La mise à jour de l'état est un processus de fusion

Lors de l'appel de ssetState() pour modifier l'état du composant, seul l'état modifié doit être transmis. in, pas l'état complet, car la mise à jour de l'état d'un composant est un processus de fusion. Par exemple, l'état d'un composant est :

this.state({
title:'React',
content:'React is an wondeful JS library'
})

Lorsque vous n'avez besoin que de modifier le titre, il vous suffit de le faire. passez le titre modifié à setState :

this.setState({title:'ReactJs'});

react fusionnera le dernier titre avec l'état d'origine, tout en conservant le contenu de l'état d'origine. L'état fusionné final est :

this.state({
title:'ReactJs,
content:''React is an wondeful Js library
})

Recommandations associées : "Tutoriel React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!