Si vous êtes nouveau dans React Native ou React, vous avez rencontré les mots state et props. Comprendre ces deux éléments est essentiel pour développer des applications mobiles dynamiques et adaptables. Nous approfondirons l'état et les accessoires dans cet article de blog, examinerons leurs différences et apprendrons comment gérer efficacement le flux de données dans votre application React Native.

Que sont l'état et les accessoires ?

État

State est un objet intégré qui permet aux composants de créer et de gérer leurs propres données. Il contient des informations qui peuvent changer au cours du cycle de vie du composant. Chaque fois que l'état change, le composant s'affiche à nouveau pour refléter ces changements.

• Mutable : L'état peut être modifié à l'aide de setState (dans les composants de classe) ou du hook useState (dans les composants fonctionnels).
• Local au composant : L'état est entièrement encapsulé et local au composant.
• Déclenche le nouveau rendu : La mise à jour de l'état entraîne le nouveau rendu du composant.

Accessoires

Props, abréviation de propriétés, sont des composants en lecture seule. Ce sont des paramètres externes transmis à un composant, de la même manière que les arguments sont transmis à une fonction.

• Immuable : Les accessoires ne peuvent pas être modifiés par le composant qui les reçoit.
• Transmis par le parent : Les accessoires sont transmis des composants parents aux composants enfants.
• Utilisé pour la configuration : Ils configurent un composant et contrôlent son comportement en externe.

Comprendre la différence

Comprendre quand utiliser l'état et quand utiliser les accessoires est essentiel pour gérer le flux de données dans votre application.

Pourquoi sont-ils importants ?

• L'état est essentiel pour les composants qui doivent suivre et répondre aux entrées de l'utilisateur, aux réponses de l'API ou à d'autres données dynamiques.
• Les accessoires permettent aux composants d'être réutilisables en acceptant des données et des fonctions dynamiques, ce qui rend votre code plus modulaire et maintenable.

Gérer efficacement le flux de données

Une gestion efficace des flux de données garantit que votre application se comporte de manière prévisible et est plus facile à déboguer et à maintenir.

1. Flux de données unidirectionnel

React Native utilise un flux de données unidirectionnel. Les données sont déplacées des composants parent vers les composants enfants via des accessoires. Cela rend le flux de données plus facile à comprendre et à déboguer.

2. Améliorer l'État

Lorsque plusieurs composants doivent accéder au même élément de données, il est préférable d'élever l'état à l'ancêtre commun le plus proche. De cette façon, l'état partagé peut être transmis via des accessoires.

3. Utilisation des rappels pour la communication enfant-parent

Pour permettre aux composants enfants de communiquer avec les composants parents, vous pouvez transmettre des fonctions (rappels) en tant qu'accessoires. Le composant enfant peut ensuite appeler cette fonction pour renvoyer les données au parent.

Exemples

Regardons quelques exemples de code pour illustrer ces concepts.

Exemple 1 : Utilisation d'accessoires

Composant parent (App.js) :

import React from 'react';
import { View } from 'react-native';
import Greeting from './Greeting';

const App = () => {
  return (
    
      
      
    
  );
};

export default App;

Composant enfant (Greeting.js) :

import React from 'react';
import { Text } from 'react-native';

const Greeting = (props) => {
  return Hello {props.name};
};

export default Greeting;

Explication:

• Le composant App transmet le prop de nom au composant Greeting.
• Le composant Greeting reçoit des accessoires et utilise props.name pour afficher un message personnalisé.

Exemple 2 : utilisation de l'état

Composant Compteur (Counter.js) :

import React, { useState } from 'react';
import { View, Button, Text } from 'react-native';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    
      You clicked {count} times
       setCount(count   1)} />
    
  );
};

export default Counter;

Explication:

• Nous utilisons le hook useState pour initialiser le compte à 0.
• La fonction setCount met à jour l'état.
• Lorsque vous appuyez sur le bouton, le compte s'incrémente et le composant est restitué pour afficher le nouveau compte.

Exemple 3 : Augmentation de l'état

Composant parent (TemperatureConverter.js) :

import React, { useState } from 'react';
import { View } from 'react-native';
import TemperatureInput from './TemperatureInput';

const toCelsius = (fahrenheit) => ((fahrenheit - 32) * 5) / 9;
const toFahrenheit = (celsius) => (celsius * 9) / 5   32;

const TemperatureConverter = () => {
  const [temperature, setTemperature] = useState('');
  const [scale, setScale] = useState('c');

  const handleCelsiusChange = (temp) => {
    setScale('c');
    setTemperature(temp);
  };

  const handleFahrenheitChange = (temp) => {
    setScale('f');
    setTemperature(temp);
  };

  const celsius =
    scale === 'f' ? toCelsius(parseFloat(temperature)) : temperature;
  const fahrenheit =
    scale === 'c' ? toFahrenheit(parseFloat(temperature)) : temperature;

  return (
    
      
      
    
  );
};

export default TemperatureConverter;

Composant enfant (TemperatureInput.js) :

import React from 'react';
import { TextInput, Text } from 'react-native';

const scaleNames = {
  c: 'Celsius',
  f: 'Fahrenheit',
};

const TemperatureInput = ({ scale, temperature, onTemperatureChange }) => {
  return (
    
      Enter temperature in {scaleNames[scale]}:
      
    >
  );
};

export default TemperatureInput;

Explication:

• La température et l'échelle de l'état partagé sont remontées vers le composant TemperatureConverter.
• Les composants TemperatureInput reçoivent des accessoires et communiquent les modifications au parent via des rappels.

Meilleures pratiques

1. Conserver les composants apatrides lorsque cela est possible

Les composants sans état sont plus faciles à tester et à déboguer. Utilisez des accessoires pour leur transmettre des données.

2. Minimiser l'état

Utilisez l'état uniquement lorsque cela est nécessaire. Trop de composants avec état peuvent rendre votre application plus difficile à gérer.

3. Évitez la mutation d'état directe

Ne modifiez jamais l'état directement. Utilisez toujours setState ou la fonction de mise à jour de useState.

4. Utiliser PropTypes pour la vérification de type

Utilisez PropTypes pour documenter les types de propriétés prévus transmis aux composants.

import PropTypes from 'prop-types';

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

5. Utiliser l'API de contexte pour l'état global

Pour les données qui doivent être accessibles par de nombreux composants à différents niveaux d'imbrication, envisagez d'utiliser l'API Context.

Erreurs courantes à éviter

• État en mutation directement :

  // Incorrect
  this.state.count = this.state.count   1;

  // Correct
  this.setState({ count: this.state.count   1 });

• Utilisation d'accessoires pour modifier directement l'état parent :

Les composants enfants ne doivent pas essayer de modifier directement les accessoires ou l'état parent. Utilisez les rappels.

Conclusion

Comprendre et gérer efficacement l'état et les accessoires est essentiel pour tout développeur React Native. En maîtrisant ces concepts, vous serez en mesure de créer des applications non seulement fonctionnelles, mais également propres, efficaces et maintenables.

Souviens-toi:

• État concerne les données qui changent au fil du temps et sont gérées au sein du composant.
• Les accessoires servent à transmettre des données et des fonctions dans l'arborescence des composants.

Prenez le temps de mettre en pratique ces concepts dans vos projets et vous constaterez une amélioration significative de votre flux de travail de développement.