Modèles de conception ReactJS : écriture de composants robustes et évolutifs

Les modèles de conception dans ReactJS fournissent des solutions standardisées et éprouvées aux problèmes courants dans le développement d'applications. L'utilisation de ces modèles rend non seulement votre code plus lisible et maintenable, mais améliore également son évolutivité et sa robustesse. Examinons certains des modèles de conception ReactJS les plus populaires, avec des exemples pour illustrer leur utilisation.

1. Modèle de conteneur et de composants de présentation

Le modèle Conteneur et Présentation sépare les composants en deux catégories :

• Composants de présentation : concentrez-vous sur l'apparence des choses (UI).
• Composants du conteneur : concentrez-vous sur le fonctionnement des choses (logique et gestion des états).

Cette séparation permet une meilleure réutilisabilité, des tests plus faciles et un code plus propre.

Exemple : composants de présentation et de conteneur

// Presentational Component: Displaying User List (UserList.js)
import React from 'react';

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

export default UserList;

// Container Component: Fetching User Data (UserContainer.js)
import React, { useState, useEffect } from 'react';
import UserList from './UserList';

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

  useEffect(() => {
    const fetchUsers = async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      const data = await response.json();
      setUsers(data);
    };
    fetchUsers();
  }, []);

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

export default UserContainer;

Ici, UserList est un composant de présentation qui reçoit les utilisateurs comme accessoires, tandis que UserContainer gère la récupération des données et la gestion de l'état.

2. Modèle de composants d'ordre supérieur (HOC)

Un Composant d'ordre supérieur (HOC) est une fonction qui prend un composant comme argument et renvoie un nouveau composant. Les HOC sont couramment utilisés pour des problèmes transversaux tels que l'authentification, la journalisation ou l'amélioration du comportement des composants.

Exemple : Création d'un HOC pour autorisation

// withAuthorization.js (HOC for Authorization)
import React from 'react';

const withAuthorization = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      if (!localStorage.getItem('authToken')) {
        // Redirect to login if not authenticated
        window.location.href = '/login';
      }
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

export default withAuthorization;

// Dashboard.js (Component Wrapped with HOC)
import React from 'react';
import withAuthorization from './withAuthorization';

const Dashboard = () => <h1>Welcome to the Dashboard</h1>;

export default withAuthorization(Dashboard);

En encapsulant Dashboard avec withAuthorization, vous vous assurez que seuls les utilisateurs authentifiés peuvent y accéder.

3. Modèle d'accessoires de rendu

Le modèle Render Props implique le partage de code entre les composants à l'aide d'un accessoire dont la valeur est une fonction. Ce modèle est utile pour le rendu dynamique basé sur certaines conditions ou états.

Exemple : Utilisation d'accessoires de rendu pour le suivi de la souris

// MouseTracker.js (Component with Render Props)
import React, { useState } from 'react';

const MouseTracker = ({ render }) => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

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

  return <div onMouseMove={handleMouseMove}>{render(position)}</div>;
};

export default MouseTracker;

// App.js (Using Render Props)
import React from 'react';
import MouseTracker from './MouseTracker';

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

export default App;

Le composant MouseTracker utilise un accessoire de rendu pour transmettre les données de position de la souris à n'importe quel composant, ce qui le rend hautement réutilisable.

4. Modèle de crochets personnalisés

Les Hooks personnalisés vous permettent d'encapsuler et de réutiliser la logique avec état sur plusieurs composants. Ce modèle favorise la réutilisabilité du code et une séparation nette des préoccupations.

Exemple : Création d'un hook personnalisé pour récupérer des données

// useFetch.js (Custom Hook)
import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(url);
      const result = await response.json();
      setData(result);
      setLoading(false);
    };
    fetchData();
  }, [url]);

  return { data, loading };
};

export default useFetch;

// App.js (Using the Custom Hook)
import React from 'react';
import useFetch from './useFetch';

const App = () => {
  const { data, loading } = useFetch('https://jsonplaceholder.typicode.com/posts');

  if (loading) return <div>Loading...</div>;

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

export default App;

Le hook personnalisé useFetch encapsule la logique de récupération de données, qui peut être réutilisée sur différents composants.

5. Modèle de composants composés

Le modèle Composants composés permet aux composants de travailler ensemble pour gérer l'état et le comportement. Ce modèle est utile pour créer des composants d'interface utilisateur complexes tels que des onglets, des accordéons ou des listes déroulantes.

Exemple : Création d'onglets avec des composants composés

// Tabs.js (Parent Component)
import React, { useState } from 'react';

const Tabs = ({ children }) => {
  const [activeIndex, setActiveIndex] = useState(0);

  return React.Children.map(children, (child, index) =>
    React.cloneElement(child, { isActive: index === activeIndex, setActiveIndex, index })
  );
};

const Tab = ({ children, isActive, setActiveIndex, index }) => (
  <button onClick={() => setActiveIndex(index)}>{children}</button>
);

const TabPanel = ({ children, isActive }) => (isActive ? <div>{children}</div> : null);

Tabs.Tab = Tab;
Tabs.TabPanel = TabPanel;

export default Tabs;

// App.js (Using Compound Components)
import React from 'react';
import Tabs from './Tabs';

const App = () => (
  <Tabs>
    <Tabs.Tab>Tab 1</Tabs.Tab>
    <Tabs.Tab>Tab 2</Tabs.Tab>
    <Tabs.TabPanel>Content for Tab 1</Tabs.TabPanel>
    <Tabs.TabPanel>Content for Tab 2</Tabs.TabPanel>
  </Tabs>
);

export default App;

Le composant Tabs gère l'état, tandis que les composants Tab et TabPanel fonctionnent ensemble pour afficher le contenu des onglets.

6. Modèle de composants contrôlés et non contrôlés

Les composants contrôlés sont entièrement gérés par l'état React, tandis que les composants non contrôlés s'appuient sur le DOM pour leur état. Les deux ont leur utilité, mais les composants contrôlés sont généralement préférés pour des raisons de cohérence et de maintenabilité.

Exemple : composants contrôlés ou non contrôlés

// Controlled Component (TextInputControlled.js)
import React, { useState } from 'react';

const TextInputControlled = () => {
  const [value, setValue] = useState('');

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

export default TextInputControlled;

// Uncontrolled Component (TextInputUncontrolled.js)
import React, { useRef } from 'react';

const TextInputUncontrolled = () => {
  const inputRef = useRef();

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

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Log Input Value</button>
    </>
  );
};

export default TextInputUncontrolled;

Dans les composants contrôlés, React contrôle entièrement l'état du formulaire, tandis que dans les composants non contrôlés, l'état est géré par le DOM lui-même.

7. Modèle d'usine de crochets

Le modèle Hooks Factory implique la création de hooks qui génèrent et gèrent dynamiquement plusieurs états ou comportements, offrant ainsi un moyen flexible de gérer une logique complexe.

Exemple : Gestion dynamique de l'état avec Hooks Factory

// useDynamicState.js (Hook Factory)
import { useState } from 'react';

const useDynamicState = (initialStates) => {
  const states = {};
  const setters = {};

  initialStates.forEach(([key, initialValue]) => {
    const [state, setState] = useState(initialValue);
    states[key] = state;
    setters[key] = setState;
  });

  return [states, setters];
};

export default useDynamicState;

// App.js (Using the Hooks Factory)
import React from 'react';
import useDynamicState from './useDynamicState';

const App = () => {
  const [states, setters] = useDynamicState([
    ['name', ''],
    ['age', 0],
  ]);

  return (
    <div>
      <input
        type="text"
        value={states.name}
        onChange={(e) => setters

.name(e.target.value)}
      />
      <input
        type="number"
        value={states.age}
        onChange={(e) => setters.age(parseInt(e.target.value))}
      />
      <p>Name: {states.name}</p>
      <p>Age: {states.age}</p>
    </div>
  );
};

export default App;

Cette usine de hooks crée et gère dynamiquement plusieurs états, offrant flexibilité et code plus propre.

Conclusion

En tirant parti de ces modèles de conception, vous pouvez créer des applications React plus robustes, évolutives et maintenables. Ces modèles vous aident à écrire du code propre et réutilisable qui respecte les meilleures pratiques, garantissant ainsi que votre application est plus facile à développer et à gérer au fil du temps.

Voulez-vous approfondir l'un de ces modèles ou explorer d'autres sujets ?

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!