J'ai lu la documentation de Démarrage rapide de React ;
Que vous déclariez un composant comme fonction ou comme classe, il ne doit jamais modifier ses propres accessoires
C'est une fonction "pure", car elle n'essaye pas de changer ses entrées, et retourne toujours le même résultat pour les mêmes entrées:
function sum(a, b) {
return a + b;
}
Ceci dans une fonction "impure", car il change sa propre entrée: https://codesandbox.io/s/9z38xv4x7r
function SayHi(props) {
props.name = "Jim"; // TypeError Cannot assign to read only property 'name' of object '#<Object>'
return <h1>Hi {props.name}!</h1>;
}
Pourquoi les accessoires React sont-ils en lecture seule?
3 réponses
Un composant doit gérer son propre état, mais il ne doit pas gérer ses propres accessoires. props est essentiellement "un état géré par le propriétaire du composant". C'est pourquoi les accessoires sont immuables .
React docs recommande également de traiter l'état comme s'il était immuable. En effet, en manipulant directement this.state, vous contournez la gestion des états de React, ce qui peut être potentiellement dangereux car appeler setState() par la suite peut remplacer la mutation que vous avez effectuée.
Le props d'un composant react est destiné à stocker les valeurs et les fonctions de son composant parent. C'est juste le motif, les accessoires sont immuables. Si vous voulez avoir une variable qui serait mutable, stockez-la dans l'état du composant. Les états sont mutables.
Vous pouvez considérer le composant React comme une fonction de ses props et state. Au fur et à mesure que vous avancez dans la documentation, vous constaterez que c'est le cas, car la plupart des fonctions du cycle de vie du composant React ont des signatures de la forme (prop, state) => { //code }.
Les documents React définissent props comme toute entrée arbitraire donnée à un composant , et le composant rendra quelque chose basé sur props (et parfois aussi sur state, s'il s'agit d'un avec état composant). Donc props est comme quelque chose qui est donné au composant pour, par exemple, référence. Imaginez-le de cette façon: vous êtes un composant, et votre composant parent vous donne un livre de référence, contenant quelques règles sur la façon dont vous devez vous comporter (a.k.a. render). Deux cas peuvent se présenter:
- Vous êtes stupide ( apatride ): Vous venez de lire le livre et vous vous comportez ainsi.
- Vous êtes intelligent ( avec état ): Vous lisez le livre, puis notez certaines choses dans votre bloc-notes, que vous pouvez afficher, mettre à jour ou supprimer. Vous pouvez même copier le contenu du livre dans votre bloc-notes, puis modifier le bloc-notes.
Dans tous les cas, vous ne pouvez pas mettre à jour le livre de référence qui vous a été remis. Seul le composant parent peut le mettre à jour (par exemple, vous donner un autre livre ou modifier son contenu).
Je ne sais pas si c'est une représentation correcte, mais les composants React fonctionnent de la même manière. Vous comprendrez bientôt. Assurez-vous de lire également Penser dans React. Bon codage!
Questions connexes
Questions liées
De nouvelles questions
reactjs
React est une bibliothèque JavaScript pour la création d'interfaces utilisateur. Il utilise un paradigme déclaratif basé sur les composants et vise à être à la fois efficace et flexible.