Composants React : classe vs fonctionnel.

Mon parcours React a commencé il y a quatre ans avec les composants fonctionnels et les Hooks. Puis est arrivé 'Siswe, un autre participant au bootcamp et notre passionné des composants de classe résidente. Alors que le reste d'entre nous collaborions sur des projets d'équipe avec des composants fonctionnels, 'Siswe s'accrochait aux composants de classe avec une loyauté inébranlable.

Les composants sont les éléments constitutifs de votre interface utilisateur (UI).

Considérez-les comme des briques Lego : vous pouvez les combiner de différentes manières pour créer des structures complexes. Ce sont des morceaux de code indépendants et réutilisables qui encapsulent l'interface utilisateur et la logique.

La réutilisation d'un composant au sein d'un autre composant ressemble généralement à ceci :

import MyComponent from './MyComponent';

function ParentComponent() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}

Les composants de classe et les composants fonctionnels sont les deux principaux moyens de créer des composants dans React.

import React, { Component } from 'react';

class Counter extends Component {
 constructor(props) {
  super(props);
  this.state = { count: 0 };
 }

 handleClick = () => {
  this.setState({  
 count: this.state.count + 1 });
 };

 render() {
  return  
 (
   <div>
    <p>You clicked {this.state.count} times</p>
    <button onClick={this.handleClick}>Click me</button>
   </div>
  );
 }
}

export default Counter;

Il s'agit d'un composant de classe, créé à l'aide de classes JavaScript qui étendent la classe React.Component.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default Counter;

Il s'agit en revanche d'un composant fonctionnel, écrit comme une simple fonction JavaScript.

Gestion de l'État : la différence fondamentale.

Les composants de classe gèrent leur propre état interne à l'aide de this.state. Ceci est généralement initialisé dans le constructeur, accessible à l'aide de l'objet this.state et mis à jour à l'aide de la méthode this.setState, comme indiqué dans le bloc de code ci-dessus.

Les composants fonctionnels étaient initialement apatrides. Mais avec l’introduction des Hooks, ils ont acquis la capacité de gérer la logique d’état et de cycle de vie. Utilisant le hook useState pour gérer l'état, il renvoie une paire de valeurs : l'état actuel et une fonction pour le mettre à jour, comme vu ci-dessus. Cela suffit pour une gestion simple de l’État. Pour une logique d'état plus complexe impliquant plusieurs sous-valeurs, ou lorsque l'état suivant dépend du précédent, vous souhaitez utiliser useReducer.
Par exemple :

import React, { useReducer } from 'react';

const initialState = {
  count: 0,
  step: 1,
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + state.step };
    case 'decrement':   

      return { ...state, count: state.count - state.step };
    case 'setStep':
      return { ...state, step: action.payload   
 };
    default:
      throw new Error();
  }
};

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => dispatch({ type: 'increment' });
  const decrement = () => dispatch({ type: 'decrement'   
 });
  const setStep = (newStep) => dispatch({ type: 'setStep', payload: newStep });

  return (
    <div>
      <p>Count: {state.count}</p>
      <p>Step: {state.step}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <input type="number" value={state.step} onChange={(e) => setStep(Number(e.target.value))} />
    </div>
  );
}

export default Counter;

Ici, useReducer gère plusieurs valeurs d'état et une logique de mise à jour complexe de manière structurée et maintenable. Les crochets sont exclusivement destinés aux composants fonctionnels.

Évitez la manipulation directe de l'objet d'état dans les deux composants.

Ne modifiez ou ne mute jamais directement l'objet d'état, quel que soit le type de composant. Créez plutôt un nouvel objet avec les valeurs mises à jour. Cette approche permet à React de suivre efficacement les modifications et d'optimiser les nouveaux rendus.

Exemple de composant fonctionnel :

import React, { useState } from 'react';

function UserProfile() {
  const [user, setUser] = useState({ name: 'Jane Doe', age: 30 });

  const handleNameChange = (newName) => {
    setUser({ ...user, name: newName }); // Create a new object with updated name
  };

  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <input type="text" value={user.name} onChange={(e) => handleNameChange(e.target.value)} />
    </div>
  );
}

export default UserProfile;

Exemple de composant de classe :

import React, { Component } from 'react';

class UserProfile extends Component {
  state = { user: { name: 'Jane Doe', age: 30 } };

  handleNameChange = (newName) => {
    this.setState(prevState => ({
      user: { ...prevState.user, name: newName } // Create a new object with updated name
    }));
  };

  render() {
    return (
      <div>
        <p>Name: {this.state.user.name}</p>
        <p>Age: {this.state.user.age}</p>
        <input type="text" value={this.state.user.name} onChange={(e) => this.handleNameChange(e.target.value)} />
      </div>
    );
  }
}

export default UserProfile;

Dans les deux exemples, nous mettons à jour la propriété name de l'objet utilisateur tout en préservant l'intégrité de l'objet d'origine. Cela garantit qu'un nouvel objet d'état est créé, préservant l'immuabilité et évitant les problèmes potentiels liés aux mises à jour d'état. Le respect de cela garantit un comportement prévisible, des optimisations de performances et un débogage plus facile.

Les composants de classe sont destinés à une logique complexe.

• Gestion d'état complexe : Lorsqu'il s'agit d'une logique d'état complexe qui nécessite un contrôle précis, les composants de classe avec this.state et this.setState peuvent offrir plus de flexibilité.
• Méthodes de cycle de vie : Pour les composants qui s'appuient fortement sur des méthodes de cycle de vie telles que composantDidMount, composantDidUpdate ou composantWillUnmount, les composants de classe sont le choix traditionnel.
• Limites des erreurs : Pour gérer les erreurs dans une arborescence de composants et éviter les plantages, les composants de classe avec composantDidCatch sont essentiels.
• Optimisation des performances : Dans des scénarios spécifiques critiques pour les performances, PureComponent ou ShouldComponentUpdate au sein des composants de classe peuvent être exploités.
• Bases de code héritées : Si vous travaillez sur un projet existant qui repose fortement sur des composants de classe, il peut être plus facile de maintenir la cohérence en les utilisant pour de nouveaux composants.

Les composants fonctionnels sont destinés aux vues simples.

• Composants simples : Pour les composants de présentation avec un état ou une logique minimale, les composants fonctionnels sont souvent le choix préféré en raison de leur simplicité et de leur lisibilité.
• Gestion de l'état avec Hooks : L'exploitation de useState et useReducer dans les composants fonctionnels offre un moyen puissant et flexible de gérer l'état.
• Effets secondaires : Le hook useEffect permet de gérer les effets secondaires tels que la récupération de données, les abonnements ou les manipulations manuelles du DOM (modèle objet de document).
• Optimisation des performances : useMemo et useCallback peuvent être utilisés pour optimiser les performances des composants fonctionnels.

Laissez les besoins de votre composant guider votre décision.

L'approche fonctionnelle est généralement considérée comme plus concise et lisible, et elle suffit souvent pour des raisons de simplicité et d'efficacité. Cependant, les composants de classe offrent plus de contrôle sur la gestion des états et les méthodes de cycle de vie, en particulier lorsqu'il s'agit de logique complexe ou d'optimisation des performances. Cela signifie une meilleure structure pour organiser une logique complexe.

Le choix entre les composants de classe et les composants fonctionnels n'est pas toujours clair, car il n'y a pas de règle stricte. Évaluez les exigences de votre composant et optez pour le type qui correspond le mieux aux exigences de votre projet.

Avec quel composant aimez-vous le plus travailler ?

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!