React.js pour les débutants - Explication des accessoires et de l'état

React.js est l'une des bibliothèques JavaScript les plus utilisées que tout développeur front-end devrait connaître. Comprendre ce que sont les accessoires et l'état et les différences entre eux est un grand pas vers l'apprentissage de React.

Dans cet article de blog, j'expliquerai ce que sont les accessoires et l'état, et je clarifierai également certaines des questions les plus posées à leur sujet:

  • Que sont les accessoires?
  • Comment passez-vous des données avec des accessoires?
  • Qu'est-ce que l'état?
  • Comment mettre à jour l'état d'un composant?
  • Que se passe-t-il lorsque l'état change?
  • Puis-je utiliser l'état dans chaque composant?
  • Quelles sont les différences entre les accessoires et l'état?
Si vous êtes un débutant complet dans React, j'ai une série de tutoriels sur React pour les débutants.

Que sont les accessoires?

Props est l'abréviation de propriétés et ils sont utilisés pour transmettre des données entre les composants React. Le flux de données de React entre les composants est unidirectionnel (du parent à l'enfant uniquement).

Comment passez-vous des données avec des accessoires?

Voici un exemple de la façon dont les données peuvent être transmises à l'aide d'accessoires:

class ParentComponent extends Component { render() { return (  ); } } const ChildComponent = (props) => { return 

{props.name}

; };

Tout d'abord, nous devons définir / obtenir des données du composant parent et les affecter à l'attribut «prop» d'un composant enfant.

«Nom» est un accessoire défini ici et contient des données textuelles. Ensuite, nous pouvons passer des données avec des accessoires comme nous donnons un argument à une fonction:

const ChildComponent = (props) => { // statements };

Et enfin, nous utilisons la notation par points pour accéder aux données de prop et les rendre:

return 

{props.name}

;

Vous pouvez également regarder ma vidéo pour voir comment utiliser les accessoires:

Qu'est-ce que l'état?

React a un autre objet intégré spécial appelé state, qui permet aux composants de créer et de gérer leurs propres données. Donc, contrairement aux accessoires, les composants ne peuvent pas transmettre de données avec l'état, mais ils peuvent les créer et les gérer en interne.

Voici un exemple montrant comment utiliser l'état:

class Test extends React.Component { constructor() { this.state = { id: 1, name: "test" }; } render() { return ( 

{this.state.id}

{this.state.name}

); } }

Comment mettre à jour l'état d'un composant?

L'état ne doit pas être modifié directement, mais il peut être modifié avec une méthode spéciale appelée setState( ).

this.state.id = “2020”; // wrong this.setState({ // correct id: "2020" });

Que se passe-t-il lorsque l'état change?

OK, pourquoi devons-nous utiliser setState( )? Pourquoi avons-nous même besoin de l'objet d'état lui-même? Si vous posez ces questions, ne vous inquiétez pas - vous comprendrez bientôt l'état :) Permettez-moi de répondre.

Un changement d'état se produit en fonction de l'entrée de l'utilisateur, du déclenchement d'un événement, etc. De plus, les composants React (avec état) sont rendus en fonction des données de l'état. L'État détient les informations initiales.

Ainsi, lorsque l'état change, React est informé et restitue immédiatement le DOM - pas tout le DOM, mais seulement le composant avec l'état mis à jour. C'est l'une des raisons pour lesquelles React est rapide.

Et comment React est-il notifié? Vous l'avez deviné: avec setState( ). La setState( )méthode déclenche le processus de re-rendu pour les pièces mises à jour. React s'informe, sait quelle (s) partie (s) changer et le fait rapidement sans re-rendre l'ensemble du DOM.

En résumé, il y a 2 points importants auxquels nous devons prêter attention lors de l'utilisation de state:

  • L'état ne doit pas être modifié directement - il setState( )doit être utilisé
  • L'état affecte les performances de votre application et ne doit donc pas être utilisé inutilement

Puis-je utiliser l'état dans chaque composant?

Une autre question importante que vous pourriez poser sur l'état est de savoir où exactement nous pouvons l'utiliser. Dans les premiers temps, l'état ne pouvait être utilisé que dans les composants de classe , pas dans les composants fonctionnels.

C'est pourquoi les composants fonctionnels étaient également appelés composants sans état. Cependant, après l'introduction de React Hooks , l'état peut désormais être utilisé à la fois dans les composants de classe et fonctionnels.

Si votre projet n'utilise pas React Hooks, vous ne pouvez utiliser l'état que dans les composants de classe.

Quelles sont les différences entre les accessoires et l'état?

Enfin, récapitulons et voyons les principales différences entre les accessoires et l'état:

  • Les composants reçoivent des données de l'extérieur avec des accessoires, alors qu'ils peuvent créer et gérer leurs propres données avec l'état
  • Les accessoires sont utilisés pour transmettre des données, tandis que l'état sert à gérer les données
  • Les données des accessoires sont en lecture seule et ne peuvent pas être modifiées par un composant qui les reçoit de l'extérieur
  • Les données d'état peuvent être modifiées par son propre composant, mais sont privées (ne sont pas accessibles de l'extérieur)
  • Les accessoires ne peuvent être passés que du composant parent à l'enfant (flux unidirectionnel)
  • La modification de l'état doit se produire avec la setState ( )méthode

React.js est l'une des bibliothèques JavaScript les plus utilisées aujourd'hui que tout développeur front-end devrait connaître.

J'espère que cet article vous aidera à comprendre les accessoires et l'état. Il y a aussi d'autres choses importantes à couvrir à propos de React, et je continuerai à les écrire plus tard dans mes articles suivants.

Si vous souhaitez en savoir plus sur le développement web, n'hésitez pas à me suivre sur Youtube !

Merci pour la lecture!