React props vs state - Différences et modèles de conception

1. React state
2. Les props de React
3. Connexion entre state et props dans React
4. Quand utiliser state ou props dans React

React est l’un des frameworks JavaScript les plus faciles à apprendre. Cependant, cette bibliothèque introduit quelques concepts qui peuvent sembler déroutants au premier abord. Par exemple, de nombreux débutants ont du mal à comprendre la différence entre props et state. Dans cet article, vous apprendrez pourquoi ces deux objets sont nécessaires et comment les utiliser au mieux.

React state

Le concept d’état n’est pas unique à React ou à d’autres frameworks JavaScript qui l’utilisent. Même certaines applications construites avec JavaScript vanille peuvent avoir un état. Dans React, le concept est un peu différent mais basé sur le même principe.

Chaque composant React conserve son objet d’état local. La gestion étatique se fait en interne. L’objet d’état est modifiable ; sa mutation est la clé du développement de composants React dynamiques qui changent en réponse aux actions de l’utilisateur.

Le composant parent ne peut pas muter l’état de ses enfants. Vous pouvez considérer les valeurs d’état comme des variables locales dans les fonctions JavaScript simples. Ces variables sont limitées à la portée de la fonction.

Dans React, l’objectif principal de l’objet d’état est de simplifier la maintenance de toutes les données qui alimentent nos applications dynamiques. Tout changement dans les valeurs de l’objet d’état va déclencher un nouveau rendu du composant. De cette façon, lorsque l’entrée de l’utilisateur change, la vue de l’utilisateur sera toujours mise à jour instantanément.

Les props de React

L’objet props (abréviation de propriétés) est utilisé pour partager les données des composants parents avec leurs enfants. Vous pouvez considérer les props comme les paramètres transmis au composant pour personnaliser son comportement. Imaginez que vous ayez un composant <Bargraph/> qui restitue un visuel. De tels composants nécessitent des nombres pour rendre un graphique. Chaque graphique restitue des données différentes, qui peuvent y être introduites via des props. Ceci n’est qu’un exemple de la façon dont les props facilitent la réutilisation des composants.

Chaque composant reçoit un objet props, qui est immuable au sein du composant. Cependant, tout comme vous pouvez passer différents arguments aux fonctions, de nombreuses instances du même composant peuvent recevoir des valeurs différentes via des props.

Sous le capot, React utilise la méthode React.createElement() pour créer des composants React et transmettre les props. Cependant, les développeurs React ont tendance à utiliser une syntaxe JSX plus familière pour créer des applications React. Cette syntaxe de type HTML offre un moyen plus lisible de transmettre les props :

const Graph=(props)=>
{
  return <div>
          <h1>{props.data.percentage}%</h1>
         </div>;
}
class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      data: {percentage: "70"}
    }
  }
  render() {
    return <Graph data={this.state.data}>Hi! Try edit me</Graph>;
  }
}

Il s’agit d’une démonstration assez simple du fonctionnement des accessoires. Tout d’abord, nous définissons un composant enfant. Comme vous pouvez le voir, le composant enfant ne conserve pas son état. Il ne lit que les données qui lui sont transmises via les props.

Ensuite, nous avons un composant parent. Contrairement au composant enfant, il utilise les données de son objet state pour les transmettre en tant que prop. Comme vous pouvez le voir, la syntaxe JSX n’est pas la même que celle du HTML normal.

Destructuration des props de React

Comme vous pouvez le voir dans l’exemple ci-dessus, chaque composant fonctionnel accepte un argument props. Les données stockées dans l’objet props sont accessibles en lisant la propriété portant le même nom que l’attribut dans JSX.

Un moyen plus simple serait de déstructurer les accessoires dans la définition de la fonction. Voici un exemple de composant fonctionnel Graph avec des props déstructurés :

const Graph=({data = { percentage: 50 } })=>
{
  return <div>
          <h1>{{data.percentage}}%</h1>
         </div>;
}

Cela vous permet d’utiliser une syntaxe plus simple et même de définir des valeurs prop par défaut. Si le composant enfant ne reçoit aucun accessoire, le composant peut lire la valeur par défaut à la place.

Connexion entre state et props dans React

Comme nous l’avons mentionné précédemment, au sein du composant React, l’objet props est strictement immuable. Cependant, il y a une mise en garde : les composants enfants peuvent muter l’état dans le composant parent, qui est utilisé comme source pour les données transmises à l’enfant via les props. Si cela est difficile à comprendre, examinons cet exemple de code :

const Graph=(props)=>
{
  const {handler, color} = props
  return <div 
         style={{width: "400px", height: "400px", border: "2px solid black", backgroundColor: `${color}`}}>                     
         <h1>{props.data.percentage}%</h1>
         <input type="text" onChange={(e) => handler(e)}/>
         </div>;
}
class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      data: {percentage: "70"},
      bgColor: "black"
    }
  }
  render() {
    const backgroundHandler = (e) => this.setState({color: e.target.value})     
    return <Graph data={this.state.data} color={this.state.bgColor} handler={backgroundHandler}>
            Hi! Try edit me</Graph>;
  }
}

Dans cet exemple, nous avons toujours les deux mêmes composants que nous utilisions auparavant. Nous transmettons un gestionnaire d’événements via les props. Ensuite, nous utilisons le même gestionnaire pour mettre à jour la propriété color dans l’état du composant parent. Une fois que la valeur dans l’état du composant parent a changé, il sera restitué et transmettra une valeur de color mise à jour à notre composant enfant.

Cela peut sembler comme si le composant enfant met à jour ses propres props, mais dans cet exemple, il utilise en fait le gestionnaire d’événement passé via les props pour mettre à jour la source de ses propres props - la valeur de la propriété color dans l’état du composant parent.

Voici un lien vers playcode. Essayez-le par vous-même - saisissez la couleur dans le champ de texte et voyez ce qui se passe.

C’est un excellent exemple de la façon dont les props et state sont interconnectés. L’état du composant parent est généralement la source des données transmises à tous ses enfants via les props.

Dans notre exemple, la valeur d’état stockée dans la propriété d’état bgColor devient une propriété color.

Cet exemple montre que state et props ne sont que deux façons de stocker les données et de gérer leur flux.

Quand utiliser state ou props dans React

Ce n’est pas un choix entre l’un ou l’autre - il est courant que les composants maintiennent state et reçoivent également des props. Les éléments de données stockés dans l’état deviennent souvent des accessoires pour les composants des enfants. Les accessoires ne se limitent pas aux données - ils peuvent également inclure des fonctions de rappel.

Pour créer une application React facile à gérer, utilisez l’état des composants situés en haut de l’arborescence des composants. Tous les autres composants doivent être sans état et recevoir les données nécessaires via les accessoires. Les composants sans état sont préférés car ils sont plus faciles à lire et à tester.

En résumé, state et props sont nécessaires, et props ne serait pas aussi efficace sans l’État. En règle générale, il est préférable d’utiliser des composants avec état pour la gestion des événements et le traitement des données, tandis que les composants sans état sont mieux adaptés à la visualisation et au formatage.