Refactoring React : apprivoiser le chaos, un composant à la fois

Refactoriser le code React, c'est comme transformer une cuisine chaotique en un paradis culinaire bien organisé. Il s'agit d'améliorer la structure, la maintenabilité et les performances de votre application sans modifier ses fonctionnalités. Que vous soyez aux prises avec des composants volumineux ou une logique d'état enchevêtrée, un refactor bien planifié transforme votre base de code en une machine élégante et efficace.

Ce blog découvre des scénarios de refactoring courants, fournit des solutions concrètes et vous permet de libérer le véritable potentiel de votre application React.

---

Je. Qu'est-ce que le refactoring et pourquoi est-ce important ?

Le refactoring améliore la structure de votre code sans modifier ses fonctionnalités. Il ne s'agit pas de corriger des bugs ou d'ajouter des fonctionnalités, il s'agit d'améliorer votre code pour les humains comme pour les machines.

Pourquoi refactoriser ?

1. Lisibilité : Le débogage du code à 3 heures du matin devient beaucoup plus facile lorsqu'il se lit comme un bon roman plutôt que comme un puzzle énigmatique.
2. Maintenabilité : Une base de code propre permet d'économiser des heures de temps d'intégration et d'accélérer les mises à jour.
3. Performances : Un code plus propre se traduit souvent par des temps de chargement plus rapides et une expérience utilisateur plus fluide.

? Conseil de pro : Évitez les optimisations prématurées. Refactorisez lorsqu'il y a un besoin évident, comme améliorer l'expérience des développeurs ou résoudre les rendus lents.

---

II. Renifler les odeurs de code

Les odeurs de code sont des signaux subtils d'inefficacité ou de complexité. Ce ne sont pas des erreurs, mais elles indiquent des domaines à améliorer.

Odeurs courantes du code React

1. Composants gonflés
   • Problème : Un seul composant gère trop de responsabilités, comme la récupération des données, le rendu et la gestion des événements.

   function ProductPage() {
     const [data, setData] = useState([]);
     useEffect(() => fetchData(), []);
     const handleAddToCart = () => { ... };
     return (
       <div>
         {data.map(item => <productitem key="{item.id}" item="{item}"></productitem>)}
         <button onclick="{handleAddToCart}">Add to Cart</button>
       </div>
     );
   }

• Solution : Divisez-le en composants plus petits et ciblés.

   function ProductPage() {
     return (
       <div>
         <productlist></productlist>
         <cartbutton></cartbutton>
       </div>
     );
   }

   function ProductList() {
     const [data, setData] = useState([]);
     useEffect(() => fetchData(), []);
     return data.map(item => <productitem key="{item.id}" item="{item}"></productitem>);
   }

   function CartButton() {
     const handleAddToCart = () => { ... };
     return <button onclick="{handleAddToCart}">Add to Cart</button>;
   }

1. Perçage d'hélices
   • Problème : Passage des accessoires à travers plusieurs couches de composants.

   <app>
     <productlist product="{product}"></productlist>
   </app>

• Solution 1 :Utiliser la composition.

   <productlist>
     <productitem product="{product}"></productitem>
   </productlist>

• Solution 2 :Utilisez le contexte.

   const ProductContext = React.createContext();

   function App() {
     const [product, setProduct] = useState({ id: 1, name: 'Example Product' }); // Example state
     return (
       <productcontext.provider value="{product}">
         <productlist></productlist>
       </productcontext.provider>
     );
   }

   function ProductList() {
     const product = useContext(ProductContext);
     return <productitem product="{product}"></productitem>;
   }

1. Enfer ternaire imbriqué
   • Problème : Rendu conditionnel complexe utilisant des ternaires imbriqués.

   return condition1 ? a : condition2 ? b : condition3 ? c : d;

• Solution : Refactorisez à l'aide de fonctions d'assistance ou d'instructions switch.

   function renderContent(condition) {
     switch (condition) {
       case 1: return a;
       case 2: return b;
       case 3: return c;
       default: return d;
     }
   }

   return renderContent(condition);

1. Logique en double
   • Problème : Répéter la même logique entre les composants.

   function calculateTotal(cart) {
     return cart.reduce((total, item) => total + item.price, 0);
   }

• Solution : Déplacez la logique partagée vers des utilitaires réutilisables ou des hooks personnalisés.

   function calculateTotalPrice(cart) {
     return cart.reduce((total, item) => total + item.price, 0);
   }

   function useTotalPrice(cart) {
     return useMemo(() => calculateTotalPrice(cart), [cart]);
   }

1. État excessif
   • Problème : Gestion directe de l'état dérivé.

   const [isLoggedIn, setIsLoggedIn] = useState(user !== null);

• Solution : Utilisez plutôt l'état dérivé.

   const isLoggedIn = !!user; // Converts 'user' to boolean

---

III. Simplifier la gestion de l'État

La gestion de l'État est essentielle mais peut vite devenir chaotique. Voici comment le simplifier :

État dérivé : calculer, ne pas stocker

• Problème : Stockage de l'état redondant.
• Solution : Calculez les valeurs dérivées directement à partir de la source.

  const [cartItems, setCartItems] = useState([]);
  const totalPrice = cartItems.reduce((total, item) => total + item.price, 0);

Utilisez useReducer pour un état complexe

• Problème : Plusieurs États interdépendants.
• Solution : Utilisez useReducer.

  const initialState = { count: 0 };
  function reducer(state, action) {
    switch (action.type) {
      case 'increment': return { count: state.count + 1 };
      default: return state;
    }
  }
  const [state, dispatch] = useReducer(reducer, initialState);

Colocation d'État

• Problème : État global utilisé pour les données locales.
• Solution : Rapprochez l’état de l’endroit où il est nécessaire.

  // Before:
  function App() {
    const [filter, setFilter] = useState('');
    return <productlist filter="{filter}" onfilterchange="{setFilter}"></productlist>;
  }

  // After:
  function ProductList() {
    const [filter, setFilter] = useState('');
    return <filterinput value="{filter}" onchange="{setFilter}"></filterinput>;
  }

---

IV. Composants de refactorisation

Les composants doivent faire un seul travail et bien le faire. Par exemple :

Un travail par composant

function MemberCard({ member }) {
  return (
    <div>
      <summary member="{member}"></summary>
      <seemore details="{member.details}"></seemore>
    </div>
  );
}

---

V. Optimisation des performances

React Profiler

Utilisez le Profiler pour identifier les goulots d'étranglement. Accédez-y dans les outils de développement sous « Profiler ».

Mémoisation

Optimisez les calculs coûteux :

   function ProductPage() {
     const [data, setData] = useState([]);
     useEffect(() => fetchData(), []);
     const handleAddToCart = () => { ... };
     return (
       <div>
         {data.map(item => <productitem key="{item.id}" item="{item}"></productitem>)}
         <button onclick="{handleAddToCart}">Add to Cart</button>
       </div>
     );
   }

Remarque : Évitez d'abuser de la mémorisation pour les dépendances fréquemment mises à jour.

---

VI. Refactorisation pour la testabilité

Écrire des tests centrés utilisateur :

   function ProductPage() {
     return (
       <div>
         <productlist></productlist>
         <cartbutton></cartbutton>
       </div>
     );
   }

   function ProductList() {
     const [data, setData] = useState([]);
     useEffect(() => fetchData(), []);
     return data.map(item => <productitem key="{item.id}" item="{item}"></productitem>);
   }

   function CartButton() {
     const handleAddToCart = () => { ... };
     return <button onclick="{handleAddToCart}">Add to Cart</button>;
   }

---

VII. Touches finales pour la maintenabilité

1. Organiser par fonctionnalité :

   <app>
     <productlist product="{product}"></productlist>
   </app>

1. Utiliser les importations absolues :

   <productlist>
     <productitem product="{product}"></productitem>
   </productlist>

---

VIII. Aide-mémoire

Category	Tip
Code Smells	Split bloated components; avoid prop drilling.
State Management	Use derived state; colocate state.
Performance	Use Profiler; optimize Context values.
Testing	Test behavior, not implementation details.

Catégorie

---

Conseil ête> Odeurs de code Diviser les composants gonflés ; évitez de percer des hélices. Gestion de l'État Utiliser l'état dérivé ; colocaliser l'état. Performances Utiliser le profileur ; optimiser les valeurs de contexte. Tests Testez le comportement, pas les détails d'implémentation.

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!