Si vous travaillez avec React depuis un certain temps, vous êtes probablement tombé sur récipient ainsi que composants de présentation , ou des composants intelligents et stupides. Ces termes décrivent une modèle qui sépare la couche UI des composants React de la logique.
Séparer l'interface utilisateur de la logique métier n'a rien d'unique à React : la séparation des préoccupations est un principe de conception qui a déjà existé dans les années 70. Par exemple, il est courant de séparer le code qui accède à la base de données de la logique métier sur le backend.
Ainsi, dans React, nous avons résolu ce problème en créant des composants de conteneur contenant toute la logique, qui transmettraient ensuite les données via des accessoires au composant de présentation.
Avec l'introduction des crochets React, il y a une nouvelle approche à cela : utiliser crochets personnalisés.
Pourquoi séparer la logique du composant ?
Avant de commencer à découpler la logique de nos composants React, nous devons savoir pourquoi.
Organiser notre code de manière à ce que chaque fonction ou composant soit responsable d'une seule chose a l'avantage que c'est beaucoup plus facile à changer et à entretenir (Dave et Andrew appellent cela "orthogonalité» dans leur livre Le programmeur pragmatique).
Appliquer cela à React signifie que notre composant aura l'air plus propre et plus organisé. Nous n'aurons pas besoin de faire défiler le mur de la logique avant de modifier l'interface utilisateur, par exemple.
Organiser votre code de cette manière ne le rend pas seulement plus beau et plus facile à naviguer, il facilite également le changement puisque le changement du crochet n'affecte pas l'interface utilisateur et vice-versa.
Les tests sont également plus accessibles : nous pouvons tester la logique séparément de l'interface utilisateur si nous le souhaitons. L'avantage le plus important pour moi, cependant, est la façon dont cette approche organise mon code.
Comment découpler la logique avec les crochets React
Pour découpler la logique de notre composant, nous allons d'abord créer un crochet personnalisé.
Prenons ce composant comme exemple. Il calcule la valeur exponentielle du nombre de base et de l'exposant :
Vous pouvez trouver le code source complet ici.
Le code ressemble à ce qui suit :
export const ExponentCalculator = () => {
const [base, setBase] = useState(4);
const [exponent, setExponent] = useState(4);
const result = (base ** exponent).toFixed(2);
const handleBaseChange = (e) => {
e.preventDefault();
setBase(e.target.value);
};
const handleExponentChange = (e) => {
e.preventDefault();
setExponent(e.target.value);
};
return (
<div className="blue-wrapper">
<input
type="number"
className="base"
onChange={handleBaseChange}
placeholder="Base"
value={base}
/>
<input
type="number"
className="exponent"
onChange={handleExponentChange}
placeholder="Exp."
value={exponent}
/>
<h1 className="result">{result}</h1>
</div>
);
};
Cela peut déjà sembler bien, mais pour les besoins de ce tutoriel, juste image qu'il y a plus de logique ici.
Dans un premier temps, nous allons déplacer la logique vers un hook personnalisé et appelez-le dans notre composant.
const useExponentCalculator = () => {
const [base, setBase] = useState(4);
const [exponent, setExponent] = useState(4);
const result = (base ** exponent).toFixed(2);
const handleBaseChange = (e) => {
e.preventDefault();
setBase(e.target.value);
};
const handleExponentChange = (e) => {
e.preventDefault();
setExponent(e.target.value);
};
return {
base,
exponent,
result,
handleBaseChange,
handleExponentChange,
};
};
export const ExponentCalculator = () => {
const {
base,
exponent,
result,
handleExponentChange,
handleBaseChange,
} = useExponentCalculator();
// ...
};
Nous pourrions déplacer ce crochet vers un fichier séparé pour une séparation plus marquée des préoccupations.
De plus, nous pouvons encore séparer notre crochet en fonctions plus petites et réutilisables. Dans ce cas, on ne peut extraire que calculateExponent.
utiliserExponentCalculator.js
const calculateExponent = (base, exponent) => base ** exponent;
const useExponentCalculator = () => {
const [base, setBase] = useState(4);
const [exponent, setExponent] = useState(4);
const result = calculateExponent(base, exponent).toFixed(2);
// ...
};
Tester ces fonctions est beaucoup plus facile que de tester le code du composant entier à partir du premier exemple. Nous pourrions les tester avec n'importe quelle bibliothèque de test Node.js, qui n'a même pas besoin de prendre en charge les composants React.
Nous avons maintenant notre code spécifique au framework (React) dans le code du composant et du hook, tandis que notre logique métier vit dans les différentes fonctions que nous avons définies plus tard (qui sont indépendantes du framework).
des pratiques d’excellence;
Nomination
J'aime nommer mes crochets personnalisés après le composant comme une concaténation de use et le nom du composant (par exemple useExponentCalculator). J'appelle alors le déposer le même comme crochet.
Vous voudrez peut-être suivre une convention de dénomination différente, mais je vous recommande rester cohérent dans votre projet.
Si je peux réutiliser des parties d'un hook personnalisé, je le déplace généralement vers un autre fichier sous src/hooks.
N'en faites pas trop
Essayez d'être pragmatique. Si un composant n'a que quelques lignes de JS, il n'est pas nécessaire de séparer la logique.
CSS-en-JS
Si vous utilisez une bibliothèque CSS-in-JS (useStyles), vous pouvez également déplacer ce code vers un autre fichier.
Vous pouvez le déplacer dans le même fichier que le crochet. Cependant, je préfère soit le garder au-dessus du composant dans le même fichier, soit le déplacer dans son propre fichier s'il devient trop volumineux.
Conclusion
Que vous pensiez que l'utilisation de hooks personnalisés améliore ou non votre code, cela dépend en fin de compte de vos préférences personnelles. Si votre base de code n'inclut pas beaucoup de logique, les avantages de ce modèle ne seront pas trop pertinents pour vous.
Les crochets personnalisés ne sont qu'un moyen d'augmenter la modularité ; Je recommanderais aussi fortement fractionnement des composants et des fonctions en plus petits morceaux réutilisables quand c'est possible.
Le sujet est également abordé à un niveau plus général dans Le programmeur pragmatique. J'ai écrit un article couvrant mes sujets préférés du livre, donc si cela vous intéresse, assurez-vous de Vérifiez cela.
