Introduction aux modèles de conception React

à mesure que les applications React augmentent en taille et en complexité, maintenir un code propre, efficace et évolutif devient un défi. Les modèles de conception React offrent des solutions éprouvées aux problèmes de développement courants, permettant aux développeurs de créer des applications plus faciles à gérer et à étendre. Ces modèles favorisent la modularité, la réutilisation du code et le respect des meilleures pratiques, ce qui en fait des outils essentiels pour tout développeur React.

Dans ce guide, nous explorerons les modèles de conception clés de React, tels que les Composants de conteneur et de présentation, les Hooks personnalisés et les Modèles de mémoisation, avec des des exemples pour démontrer leurs avantages. Que vous soyez débutant ou développeur expérimenté, cet article vous aidera à comprendre comment utiliser ces modèles pour améliorer votre flux de travail et créer de meilleures applications React.

Composants de conteneur et de présentation

Le modèle Conteneur et composants de présentation est une approche de conception largement utilisée dans React qui sépare la logique de l'application du rendu de l'interface utilisateur. Cette séparation permet de créer des composants modulaires, réutilisables et testables, conformément au principe de séparation des préoccupations.

• Composants du conteneur?: Gérez la logique métier, la gestion de l'état et la récupération des données. Ils se concentrent sur comment les choses fonctionnent.
• Composants de présentation?: Gérez l'affichage des données et de l'interface utilisateur. Ils se concentrent sur à quoi les choses ressemblent.

Cette division rend votre base de code plus maintenable, car les modifications de la logique ou de l'interface utilisateur peuvent être gérées indépendamment sans s'affecter les unes les autres.

Avantages du modèle

1. Réutilisabilité du code?: Les composants de présentation peuvent être réutilisés dans différentes parties de l'application.
2. Testabilité améliorée?: La logique de test devient plus facile car elle est isolée dans les composants du conteneur.
3. Maintenance simplifiée?: Les modifications de la logique ou de l'interface utilisateur peuvent être traitées indépendamment, réduisant ainsi le risque de casser d'autres parties du code.

Exemple?: récupération et affichage des données utilisateur

Voici comment le modèle de conteneur et de composants de présentation peut être implémenté?:

Composant conteneur

import React, { useState, useEffect } from "react";
import UserList from "./UserList";

const UserContainer = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/users")
      .then((response) => response.json())
      .then((data) => {
        setUsers(data);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, []);

  return <UserList users={users} loading={loading} />;
};

export default UserContainer;

Composant de présentation

import React from "react";

const UserList = ({ users, loading }) => {
  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

Dans cet exemple?:

• UserContainer récupère les données utilisateur et les transmet, ainsi que l'état de chargement, en tant qu'accessoires à UserList.
• UserList se concentre uniquement sur le rendu des données utilisateur.

Ce modèle améliore la clarté, réduit la duplication de code et simplifie les tests. Il est particulièrement utile pour les applications où la récupération de données et le rendu de l'interface utilisateur sont fréquents et complexes.

Crochets personnalisés pour la composition

Custom Hooks vous permettent d'encapsuler une logique réutilisable, rendant votre code React plus propre et plus modulaire. Au lieu de dupliquer la logique sur plusieurs composants, vous pouvez l'extraire dans un hook et l'utiliser partout où vous en avez besoin. Cela améliore la réutilisabilité et la testabilité du code tout en adhérant au principe DRY (Don’t Repeat Yourself).

Exemple?: Récupérer le hook de données

Crochet personnalisé

import React, { useState, useEffect } from "react";
import UserList from "./UserList";

const UserContainer = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/users")
      .then((response) => response.json())
      .then((data) => {
        setUsers(data);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, []);

  return <UserList users={users} loading={loading} />;
};

export default UserContainer;

Utiliser le crochet

import React from "react";

const UserList = ({ users, loading }) => {
  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

Dans cet exemple, le hook useFetchData encapsule la logique de récupération de données, permettant à n'importe quel composant de récupérer des données avec un minimum de passe-partout. Les hooks personnalisés sont inestimables pour simplifier le code et garantir une architecture propre.

Gestion d'état avec des réducteurs

Lors de la gestion d'états complexes ou groupés, le Modèle de réduction fournit une manière structurée de gérer les transitions d'état. Il centralise la logique d'état en une seule fonction, ce qui rend les mises à jour d'état prévisibles et plus faciles à déboguer. Le hook useReducer de React est idéal pour implémenter ce modèle.

Avantages des réducteurs

1. Prévisibilité?: Les changements d'état sont définis explicitement par des actions.
2. évolutivité?: Convient à la gestion d'états complexes avec de multiples dépendances.
3. Maintenabilité?: La logique centralisée simplifie le débogage et les tests.

Exemple?: gestion de l'état d'authentification

Fonction Réducteur

import { useState, useEffect } from "react";

const useFetchData = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((result) => {
        setData(result);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
};

export default useFetchData;

Composant utilisant useReducer

import React from "react";
import useFetchData from "./useFetchData";

const Posts = () => {
  const { data: posts, loading } = useFetchData("/api/posts");

  if (loading) return <p>Loading...</p>;
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

export default Posts;

Dans cet exemple?:

• L'authReducer définit comment l'état change en fonction des actions.
• AuthComponent utilise useReducer pour gérer l'état d'authentification.

Les réducteurs sont particulièrement efficaces pour gérer une logique d'état complexe dans des applications évolutives, favorisant ainsi la clarté et la cohérence de la gestion des états.

Modèle de fournisseur pour l'API contextuelle

Le Modèle de fournisseur exploite l'API contextuelle de React pour partager l'état ou les fonctions entre les composants sans per?age d'accessoires. Il enveloppe les composants dans un fournisseur de contexte, permettant aux composants profondément imbriqués d'accéder aux données partagées.

Avantages

1. évite le Prop Drilling?: Simplifie la transmission des données via des composants profondément imbriqués.
2. Gestion centralisée des états?: Gérez facilement les états globaux comme les thèmes ou l'authentification.

Exemple?: Contexte du thème

const initialState = { isAuthenticated: false, user: null };

function authReducer(state, action) {
  switch (action.type) {
    case "LOGIN":
      return { ...state, isAuthenticated: true, user: action.payload };
    case "LOGOUT":
      return initialState;
    default:
      return state;
  }
}

Utiliser le contexte

import React, { useState, useEffect } from "react";
import UserList from "./UserList";

const UserContainer = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/users")
      .then((response) => response.json())
      .then((data) => {
        setUsers(data);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, []);

  return <UserList users={users} loading={loading} />;
};

export default UserContainer;

Composants d'ordre supérieur (HOC)

Les composants d'ordre supérieur (HOC) sont des fonctions qui prennent un composant et renvoient un nouveau composant avec des fonctionnalités supplémentaires. Ils vous permettent de réutiliser la logique sur plusieurs composants sans modifier leur structure.

Avantages

1. Réutilisabilité du code?: Partagez la logique comme l'authentification ou la thématisation entre les composants.
2. Encapsulation?: Gardez la logique améliorée séparée du composant d'origine.

Exemple?:?Authentification HOC

import React from "react";

const UserList = ({ users, loading }) => {
  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

Composants composés

Le modèle Composants composés vous permet de créer un composant parent avec plusieurs composants enfants qui fonctionnent ensemble de manière cohérente. Ce modèle est idéal pour créer des composants d'interface utilisateur flexibles et réutilisables.

Avantages

1. Personnalisabilité?: Les composants enfants peuvent être combinés de différentes manières.
2. Clarté?: Définir clairement les relations entre les composants parent et enfant.

Exemple?: composant d'onglets

import { useState, useEffect } from "react";

const useFetchData = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((result) => {
        setData(result);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
};

export default useFetchData;

1. useMemo?: Mémorise le résultat d'un calcul, en recalculant uniquement lorsque les dépendances changent.

import React from "react";
import useFetchData from "./useFetchData";

const Posts = () => {
  const { data: posts, loading } = useFetchData("/api/posts");

  if (loading) return <p>Loading...</p>;
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

export default Posts;

1. useCallback?: Mémorise les fonctions, utiles lors de la transmission de rappels aux composants enfants.

const initialState = { isAuthenticated: false, user: null };

function authReducer(state, action) {
  switch (action.type) {
    case "LOGIN":
      return { ...state, isAuthenticated: true, user: action.payload };
    case "LOGOUT":
      return initialState;
    default:
      return state;
  }
}

La mémorisation améliore les performances dans les scénarios impliquant de grands ensembles de données ou des mises à jour complexes de l'interface utilisateur, garantissant ainsi que les applications React restent réactives.

Conclusion

Ma?triser les modèles de conception React est essentiel pour créer des applications évolutives, maintenables et efficaces. En appliquant des modèles tels que Composants de conteneur et de présentation, Hooks personnalisés et Mémoisation, vous pouvez rationaliser le développement, améliorer la réutilisabilité du code et améliorer les performances. Les modèles avancés tels que les Composants d'ordre supérieur, les Composants composés et le Modèle de fournisseur simplifient davantage la gestion des états complexes et les interactions entre les composants.

Ces modèles ne sont pas seulement théoriques?: ils répondent aux défis du monde réel dans le développement de React, vous aidant à écrire du code propre et modulaire. Commencez à intégrer ces modèles dans vos projets pour créer des applications robustes, faciles à faire évoluer et maintenables à long terme. Avec les modèles de conception React dans votre bo?te à outils, vous serez mieux équipé pour aborder n'importe quel projet, aussi complexe soit-il.
Pour plus d'informations, consultez la documentation React Design Patterns sur Patterns.dev.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!