Améliorer l'état: comment les composants de l'enfant réagissent pour communiquer avec les parents

React utilise un flux de données unidirectionnel du parent vers l'enfant, jamais d'un enfant vers le parent. Mais que se passe-t-il lorsqu’un enfant a besoin de communiquer avec son parent ?

Découvrez comment lever l’état pour permettre à un composant enfant d’envoyer des données à un composant parent.

Composants dans React

React organise les composants dans une hiérarchie où les composants enfants s'imbriquent dans les composants parents. Cette hiérarchie constitue les éléments constitutifs de l’interface utilisateur de l’application.

</ParentComponent>

Chaque composant enfant reçoit des données, appelées accessoires, de son composant parent. Les accessoires React peuvent contenir différents types de données tels que des tableaux, des objets, des chaînes ou même des fonctions. Le composant enfant ne peut pas manipuler directement ces données.

Considérons le composant suivant, appelé Contre-bouton:

const CounterButton = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count + 1)
 }
return (
Increment</button>
 )
}

Le composant conserve une valeur d'état nommée compter qui augmente chaque fois qu'un utilisateur clique sur le bouton.

Supposons que vous ayez imbriqué le composant CounterButton dans un autre composant nommé Home :

const Home = () => {
return (

 )
}

Si vous souhaitez afficher la valeur de comptage du Contre-bouton composant à l’intérieur du composant Accueil, vous rencontrerez un défi.

Comme mentionné, React applique un flux de données unidirectionnel du parent vers l'enfant. Par conséquent, le composant CounterButton ne peut pas partager directement la valeur de l’état de comptage avec le composant Home.

Pour contourner ce problème, il faut relever l’État.

Comment augmenter l'état pour partager des données entre les composants

L'état de levage fait référence au déplacement de l'état d'un composant plus haut dans l'arborescence des composants, vers un composant parent. Une fois que vous avez levé l'état, vous pouvez le transmettre aux composants enfants en tant que valeurs d'accessoires.

Dans le contre-exemple précédent, vous devrez déplacer l'état du comptage et le handleIncrement fonction au composant Home. Vous devrez ensuite transmettre la fonction handleIncrement au composant CounterButton en tant qu'accessoire.

const Home = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count++)
 }
return (

{count}</p>
 )
}

Ensuite, vous devez modifier le composant CounterButton pour accepter la fonction handleIncrement et l'appeler lorsqu'un utilisateur clique sur le bouton.

const CounterButton = ({handleIncrement}) => {
return (
Increment</button>
 )
}

La levée de l’État centralise les données et transfère la responsabilité des gérer l'état de l'enfant au parent.

En plus de vous aider à afficher les données dans le composant parent, la suppression de l'état peut vous aider à synchroniser les données sur plusieurs composants.

Supposons que vous ayez un composant d'en-tête et de pied de page imbriqué dans le composant parent et que chacun de ces composants affiche également le nombre partagé. Pour partager cette valeur, vous pouvez la transmettre à ces composants en tant qu'accessoires.

const Home = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count++)
 }
return (



 )
}

Cependant, vous devez faire attention en soulevant l'état afin de ne pas vous retrouver dans une situation connue sous le nom de forage d'hélices.

Le défi du forage d’hélices

Au fur et à mesure que votre application se développe, vous constaterez peut-être que plusieurs composants plus profonds dans l'arborescence des composants ont besoin d'accéder à un état partagé. Pour rendre cet état partagé disponible pour les composants imbriqués, vous devez transmettre les accessoires via des composants intermédiaires. Ce processus peut conduire au forage d’hélices.

Le forage accessoire rend difficile le suivi du flux de données et peut conduire à un code difficile à maintenir.

Pour atténuer le forage d'accessoires tout en partageant les données de plusieurs composants, envisagez d'utiliser le contexte React. Le contexte React vous permet de centraliser l'état afin qu'il soit disponible dans l'ensemble de l'application.

Partager des données dans React à l'aide d'accessoires

Lorsque vous devez partager les données d'un composant enfant avec son composant parent, élevez l'état au composant parent, puis transmettez la fonction qui met à jour l'état au composant enfant en tant qu'accessoires.

Dans les cas où le composant enfant est profondément imbriqué dans l'arborescence des composants, utilisez un outil de gestion d'état tel que React Context ou un outil tiers tel que React Redux pour empêcher l'exploration des accessoires.