Principaux modèles de conception React que chaque développeur devrait connaître pour des applications évolutives et efficaces

Alors que React continue de dominer l'écosystème front-end, la maîtrise de ses modèles de conception peut améliorer considérablement l'efficacité et l'évolutivité de vos applications. Les modèles de conception React offrent les meilleures pratiques pour organiser et structurer les composants, gérer l'état, gérer les accessoires et améliorer la réutilisabilité. Dans ce blog, nous explorerons quelques modèles de conception React clés qui peuvent faire passer votre processus de développement de bon à excellent.

1. Composants de présentation et de conteneur

L'un des modèles fondamentaux de React est le modèle Composants de présentation et de conteneur, qui consiste à séparer les préoccupations :

• Composants de présentation : Ces composants sont responsables de l'apparence des choses. Ils reçoivent des données et des rappels via des accessoires mais n'ont pas de logique propre. Leur seul objectif est de restituer l'interface utilisateur.

• Composants du conteneur : Ces composants gèrent le fonctionnement des choses. Ils contiennent la logique, gèrent l’état et gèrent la récupération des données ou la gestion des événements. Les composants du conteneur transmettent les données aux composants de présentation.

// Presentational Component
const UserProfile = ({ user }) => (
  <div>
    <h1>{user.name}</h1>
    <p>{user.email}</p>
  </div>
);

// Container Component
const UserProfileContainer = () => {
  const [user, setUser] = useState({ name: 'John Doe', email: 'john@example.com' });

  return <UserProfile user={user} />;
};

Ce modèle encourage la séparation des préoccupations, rendant le code plus facile à maintenir et à tester.

2. Composants d'ordre supérieur (HOC)

Les

Les composants d'ordre supérieur (HOC) sont un modèle de conception puissant pour réutiliser la logique des composants. Un HOC est une fonction qui prend un composant et renvoie un nouveau composant avec un comportement amélioré ou des fonctionnalités ajoutées.

Ce modèle est couramment utilisé pour des problèmes transversaux tels que l'authentification, la thématique ou la récupération de données.

// Higher-Order Component for authentication
const withAuth = (WrappedComponent) => {
  return (props) => {
    const isAuthenticated = // logic to check auth;

    if (!isAuthenticated) {
      return <div>You need to log in!</div>;
    }

    return <WrappedComponent {...props} />;
  };
};

// Usage
const Dashboard = () => <div>Welcome to the dashboard</div>;
export default withAuth(Dashboard);

Les HOC promeuvent les principes DRY (Don't Repeat Yourself) en permettant une logique réutilisable sur plusieurs composants.

3. Accessoires de rendu

Le modèle Render Props implique de transmettre une fonction en tant qu'accessoire à un composant, permettant un rendu dynamique du contenu basé sur cette fonction. Ceci est particulièrement utile pour partager une logique avec état entre des composants sans utiliser de HOC.

// Render Prop Component
class MouseTracker extends React.Component {
  state = { x: 0, y: 0 };

  handleMouseMove = (event) => {
    this.setState({ x: event.clientX, y: event.clientY });
  };

  render() {
    return (
      <div onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

// Usage
const App = () => (
  <MouseTracker render={({ x, y }) => <h1>Mouse position: {x}, {y}</h1>} />
);

Ce modèle vous offre de la flexibilité en séparant la logique de l'interface utilisateur, rendant les composants plus réutilisables et personnalisables.

4. Composants composés

Le modèle de composant composé est couramment utilisé dans les bibliothèques telles que React-Select ou React-Table. Il permet à un composant parent de contrôler un groupe de composants enfants. Ce modèle favorise la flexibilité dans la création d'interfaces réutilisables et dynamiques.

// Compound Component
const Tabs = ({ children }) => {
  const [activeTab, setActiveTab] = useState(0);

  return (
    <div>
      <div>
        {children.map((child, index) => (
          <button key={index} onClick={() => setActiveTab(index)}>
            {child.props.title}
          </button>
        ))}
      </div>
      <div>{children[activeTab]}</div>
    </div>
  );
};

// Usage
<Tabs>
  <div title="Tab 1">Content of Tab 1</div>
  <div title="Tab 2">Content of Tab 2</div>
</Tabs>;

Ce modèle fournit une API propre pour la communication parent-enfant tout en gardant les composants flexibles et personnalisables.

5. Composants contrôlés et non contrôlés

React propose deux manières de gérer les entrées de formulaire : les composants contrôlés et les composants non contrôlés.

• Composants contrôlés : Ces composants ont leur état entièrement contrôlé par React via des accessoires, ce qui les rend plus prévisibles.

• Composants non contrôlés : Ces composants s'appuient sur des références pour manipuler directement le DOM, offrant moins de contrôle mais potentiellement plus de performances.

// Controlled Component
const ControlledInput = () => {
  const [value, setValue] = useState('');

  return <input value={value} onChange={(e) => setValue(e.target.value)} />;
};

// Uncontrolled Component
const UncontrolledInput = () => {
  const inputRef = useRef();

  const handleClick = () => {
    console.log(inputRef.current.value);
  };

  return <input ref={inputRef} />;
};

Le choix entre ces modèles dépend de si vous avez besoin d'un contrôle précis ou d'optimisations légères des performances.

6. Hooks personnalisés

React Hooks nous permet de créer une logique personnalisée de manière réutilisable. En extrayant la logique commune dans des hooks personnalisés, nous pouvons éviter la duplication de code et rendre notre base de code plus modulaire.

// Custom Hook
const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => setError(error));
  }, [url]);

  return { data, error };
};

// Usage
const DataFetchingComponent = () => {
  const { data, error } = useFetch('https://api.example.com/data');

  if (error) return <p>Error: {error.message}</p>;
  if (!data) return <p>Loading...</p>;

  return <div>{data.someField}</div>;
};

Les hooks personnalisés permettent une meilleure séparation des préoccupations et la réutilisation des fonctionnalités communes de manière déclarative.

Conclusion

Les modèles de conception sont un élément essentiel de l'écriture d'applications React propres, maintenables et évolutives. En tirant parti de modèles tels que les composants de présentation et de conteneur, les HOC, les accessoires de rendu, les composants composés et les hooks personnalisés, vous pouvez vous assurer que votre code est flexible, réutilisable et facile à comprendre.

Comprendre et mettre en œuvre ces modèles peut considérablement améliorer votre flux de travail de développement, rendant vos projets React plus organisés et efficaces. Essayez de les intégrer dans votre prochain projet et découvrez la différence en termes de qualité et de maintenabilité du code !

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!