Comment utiliser state et setState dans React (tutoriel détaillé)

Cet article présente principalement l'utilisation de state et setState dans les notes d'étude de réaction. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil.

Dans React, state et setState() sont utilisés pour contrôler l'état des composants.

state

state est utilisé en réaction pour stocker l'état des données des composants et peut être comparé aux données en vue.

1. Le rôle de l'état

l'état est un objet d'un composant dans React traite l'interface utilisateur comme une machine à états, imagine qu'elle a différents états. puis restitue ces états peut facilement garder l'interface utilisateur cohérente avec les données.

Dans React, la mise à jour de l'état d'un composant entraînera le rendu de l'interface utilisateur (n'utilisez pas simplement le DOM). En d'autres termes, l'interface utilisateur changera avec l'état Et les changements.

2. Comment fonctionne l'état

La méthode couramment utilisée pour informer React des modifications de données consiste à appeler setState. (données, rappel). Cette méthode fusionnera les données dans ce .state et restituera le composant une fois le rendu terminé, appellera le rappel facultatif

. Dans la plupart des cas, il n'est pas nécessaire de fournir un rappel. callback, car React sera responsable de la mise à jour de l'interface vers le dernier état

setState()

La différence avec vue est que l'état ne peut pas être modifié directement et doit être modifié. à modifier via la méthode setState().

1. SetState() ne prendra pas effet immédiatement après la mise à jour de l'état du composant. Afin d'améliorer les performances, React mettra à jour l'état par lots, puis effectuera le rendu, ce qui est donc une opération asynchrone. nécessaire pour obtenir la valeur de state immédiatement après setSate() Le statut après la mise à jour.

2. Le premier paramètre de setState() accepte deux types de paramètres, Objet et Fonction

Objet

this.setState({
 msg: '更新state msg'
})

Lorsque le paramètre est Lorsqu'il s'agit d'un objet, il peut s'agir de la clé dans l'état correspondant, et la valeur est la nouvelle valeur.

Fonction

Lorsque le paramètre est une fonction, setState() transmettra le résultat du setState() précédent en tant que paramètre dans cette fonction

...
constructor () {
 this.state = { counter: 0 }
}
add() {
 this.setState({ counter: this.state.counter + 1 })
 this.setState({ counter: this.state.counter + 1 }) // 此时`this.state.counter`的值还是初始值0,，所以这个操作是无效的
 this.setState(prevState => { counter: prevState.counter + 1 }) // `prevState.counter` 为上次更新之后的值，即是1
}
...

Le deuxième paramètre de setState() est une fonction de rappel, indiquant que la mise à jour de l'état est terminée

this.setState({
 msg: '更新state msg'
}, () => {
 console.log('state 更新完毕')
})

Selon cela, Promise et async/await peuvent être utilisés pour l'encapsuler dans un fichier synchrone opération

setStateAsync(state) {
 return new Promise(resolve => {
  this.setState(state, resolve)
 })
}
// 使用
async add() {
 await setStateAsync({ counter: this.state.counter + 1 })
 console.log('state 更新完毕')
}

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comment utiliser le composant swiper pour obtenir un affichage de changement d'image dans le mini-programme WeChat

Qu'y a-t-il dans vue2.0 Bibliothèques d'interface utilisateur couramment utilisées ?

Comment convertir un caractère en entier en C#

Comment fusionner vue2.0 et animate.css ensemble (tutoriel détaillé)

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!