Home-theater-designers
La gestion des données et la création d'applications solides et maintenables sont des compétences essentielles en matière de développement de logiciels. Une façon courante de modulariser vos applications React consiste à utiliser le forage d'accessoires, qui aide à transmettre les données dans l'arborescence des composants.
Vidéo MUO du jour FAITES DÉFILER POUR CONTINUER AVEC LE CONTENU
Mais, à mesure que les projets deviennent plus importants, le forage sur hélice peut avoir ses inconvénients. Explorez les problèmes liés au forage sur hélice et découvrez les alternatives disponibles.
Comprendre le forage d'accessoires
Le forage d'accessoires est une technique qui transmet les données dans l'arborescence des composants sous forme d'accessoires, que les composants intermédiaires aient besoin ou non des données.
L'exploration consiste à transmettre des accessoires d'un parent à ses composants enfants, et plus bas dans la hiérarchie. L'objectif principal est de permettre aux composants des niveaux inférieurs de l'arborescence d'accéder aux données fournies par les composants de niveau supérieur et de les utiliser.
Les inconvénients du forage sur hélice
Alors que le prop drill résout le problème du partage des données, il présente plusieurs inconvénients qui peuvent entraver la maintenabilité du code et l'efficacité du développement.
1. Complexité accrue
À mesure qu'une application se développe, le forage d'hélice devient plus difficile à gérer. Cela peut conduire à un réseau complexe de dépendances de composants, rendant le code difficile à comprendre et à modifier.
import ChildComponent from './ChildComponent';
export default function ParentComponent = () => {
const data = 'Prop drilling!';
return ( <div> <ChildComponent data={data} /> </div> );
};
import GrandChildComponent from './GrandChildComponent';
export default function ChildComponent = ({ data }) => {
return ( <div> <GrandChildComponent data={data} /> </div> );
};
import GreatGrandChildComponent from './GreatGrandChildComponent';
export default function GrandChildComponent = ({ data }) => {
return ( <div> <GreatGrandChildComponent data={data} /> </div> );
};
export default function GreatGrandChildComponent = ({ data }) => {
return ( <div> <p>{data}</p> </div> );
};
Ici, les données du ParentComponent de niveau supérieur sont déplacées vers GreatGrandChildComponent via deux composants intermédiaires.
Au fur et à mesure que la hiérarchie des composants s'approfondit et que de plus en plus de composants dépendent de l'accessoire, il devient plus difficile de tracer et de gérer le flux de données.
2. Couplage serré
Cela se produit lorsque les composants dépendent les uns des autres via des accessoires, ce qui rend difficile leur modification ou leur réutilisation. Cela peut rendre difficile la modification d'un composant sans affecter les autres.
import ChildComponentA from './ChildComponentA';
import ChildComponentB from './ChildComponentB';
export default function ParentComponent = () => {
const sharedData = 'Shared data';
return (
<div>
<ChildComponentA data={sharedData} />
<ChildComponentB data={sharedData} />
</div>
);
};
import GrandChildComponent from './GrandChildComponent';
export default function ChildComponentA = ({ data }) => {
return (
<div>
<p>Component A</p>
<GrandChildComponent data={data} />
</div>
);
};
import GrandChildComponent from './GrandChildComponent';
export default function ChildComponentB = ({ data }) => {
return (
<div>
<p>Component B</p>
<GrandChildComponent data={data} />
</div>
);
};
export default function GrandChildComponent = ({ data }) => {
return (
<div> <p>{data}</p> </div>
);
};
Ici, les deux composants enfants reçoivent les mêmes données de leur composant parent et les transmettent à GrandChildComponent.
application pour mettre votre visage sur une photo
Si les données sont mises à jour, tous les composants de la hiérarchie doivent également être mis à jour, même si certains n'utilisent pas les données. Cela peut être difficile et prendre du temps, et cela augmente également le risque d'introduire des bugs.
3. Maintenabilité du code
Le forage d'accessoires est un problème de maintenance du code, car les nouveaux composants doivent accéder aux accessoires transmis via la hiérarchie. Cela peut entraîner des bogues si vous devez modifier de nombreux composants et des incohérences si les accessoires changent.
erreur de périphérique d'e/s windows 10
import ChildComponent from './ChildComponent';
export default function ParentComponent = () => {
const [count, setCount] = useState(0);
const incrementCount = () => {
setCount(count + 1);
};
return (
<div>
<ChildComponent count={count} incrementCount={incrementCount} />
</div>
);
};
import GrandChildComponent from './GrandChildComponent';
export default function ChildComponent = ({ count, incrementCount }) => {
return (
<div>
<button onClick={incrementCount}>Increment</button>
<GrandChildComponent count={count} />
</div>
);
};
export default function GrandChildComponent = ({ count }) => {
return (
<div>
<p>Count: {count}</p>
</div>
);
};
Ici, le ParentComponent transmet la valeur de comptage en tant que prop au ChildComponent, puis au GrandChildComponent.
Mais, si le nombre change ou s'il existe une nouvelle règle pour passer des accessoires supplémentaires, vous devrez mettre à jour chaque composant de la hiérarchie qui utilise l'accessoire. Ce processus est sujet aux erreurs, ce qui rend la maintenance du code difficile et augmente les incohérences ou les erreurs.
Exploration d'alternatives au forage sur hélice
Il existe de nombreuses solutions de gestion d'état dans l'écosystème React que vous pouvez utiliser pour surmonter les inconvénients du forage d'hélices.
Contexte de réaction
React Context est une fonctionnalité qui permet le partage de l'état entre les composants sans passer d'accessoires. Il fournit un magasin centralisé auquel les composants peuvent accéder avec le crochet useContext . Cela peut améliorer les performances et faciliter la gestion de l'état.
Redux
Redux est une bibliothèque de gestion d'état qui fournit un magasin d'état global unique. Les composants peuvent accéder à l'état et le mettre à jour via des actions et des réducteurs. Cela peut aider à garder votre code organisé et peut faciliter le débogage.
MobX
MobX est une bibliothèque de gestion d'état qui utilise des données observables. Cela signifie que les composants peuvent s'abonner aux changements d'état et agir en réponse. La bibliothèque peut rendre votre code plus réactif et peut améliorer les performances.
Quelque chose
Jotai est une bibliothèque de gestion d'état pour React , qui utilise un modèle d'état atomique. Il vous permet de créer des atomes d'état auxquels les composants peuvent accéder et mettre à jour.
Avec Jotai, vous pouvez réduire le besoin de forage d'hélice et obtenir une approche de gestion de l'état plus rationalisée et efficace. Son design minimaliste et sa concentration sur les performances en font un choix incontournable pour la gestion de l'état dans les applications React.
Maîtriser la communication des composants : étendre votre boîte à outils au-delà du forage d'accessoires
Le forage prop est une technique permettant de transmettre des données des composants parents aux composants enfants. Il est efficace pour partager des données, mais il présente plusieurs inconvénients qui peuvent rendre le code difficile à maintenir et à développer.
Pour surmonter ces inconvénients, vous pouvez utiliser des alternatives telles que React Context, Redux et MobX. Ces solutions offrent un moyen plus centralisé de gérer les données, ce qui peut rendre le code plus maintenable et évolutif.