Props vs State dans React

Quelle est la différence entre l'état et les accessoires dans React?

Dans un composant React,accessoiressont des variables qui lui sont transmises par son composant parent.Étatd'autre part, ce sont toujours des variables, mais directement initialisées et gérées par le composant.

L'état peut être initialisé par des accessoires.

Par exemple, un composant parent peut inclure un composant enfant en appelant

<ChildComponent />

Le parent peut passer un accessoire en utilisant cette syntaxe:

<ChildComponent color=green />

Dans le constructeur ChildComponent, nous pourrions accéder à la prop:

class ChildComponent extends React.Component {
  constructor(props) {
    super(props)
    console.log(props.color)
  }
}

et toute autre méthode de cette classe peut référencer les accessoires en utilisantthis.props.

Les accessoires peuvent être utilisés pour définir l'état interne en fonction d'une valeur prop dans le constructeur, comme ceci:

class ChildComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state.colorName = props.color
  }
}

Bien sûr, un composant peut également initialiser l'état sans regarder les accessoires.

Dans ce cas, il n'y a rien d'utile à faire, mais imaginez faire quelque chose de différent en fonction de la valeur de prop, il est probablement préférable de définir une valeur d'état.

Les accessoires ne doivent jamais être modifiés dans un composant enfant, donc s'il se passe quelque chose qui modifie une variable, cette variable doit appartenir à l'état du composant.

Les accessoires sont également utilisés pour permettre aux composants enfants d'accéder aux méthodes définies dans le composant parent. C'est un bon moyen de centraliser la gestion de l'état dans le composant parent et d'éviter que les enfants aient besoin d'avoir leur propre état.

La plupart de vos composants afficheront simplement une sorte d'informations en fonction des accessoires qu'ils ont reçus et resterontapatride.

Téléchargez mon gratuitManuel React


Plus de tutoriels de réaction: