Quels sont les différents types de composants React (fonctionnel, classe)?

Quels sont les différents types de composants React (fonctionnel, classe)?

Les composants React sont les éléments constitutifs d'une application React, et ils peuvent être classés en deux types principaux: les composants fonctionnels et les composants de classe.

1. Composants fonctionnels:

   • Initialement introduits comme un moyen plus simple d'écrire des composants, les composants fonctionnels sont essentiellement des fonctions JavaScript.
   • Ils acceptent les accessoires comme argument et renvoient des éléments de réaction pour décrire l'interface utilisateur.
   • Avec l'introduction de crochets (à partir de React 16.8), les composants fonctionnels ont acquis la capacité de gérer les effets de l'état et de la partie, ce qui les rend aussi puissants que les composants de classe.

   • Voici un exemple de base d'un composant fonctionnel:

      <code class="javascript">function Welcome(props) { return <h1>Hello, {props.name}</h1>; }</code>

2. Composants de classe:

   • Les composants de classe sont des classes ES6 qui étendent React.Component .
   • Ils ont une syntaxe plus complexe et nécessitent l'utilisation de this pour accéder aux accessoires, à l'état et aux méthodes de cycle de vie.
   • Les composants de classe ont des méthodes de cycle de vie comme componentDidMount , componentDidUpdate et componentWillUnmount , qui sont utilisés pour gérer le cycle de vie du composant.

   • Voici un exemple de base d'un composant de classe:

      <code class="javascript">class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }</code>

Quand dois-je utiliser un composant fonctionnel par rapport à un composant de classe dans React?

Le choix entre les composants fonctionnels et la classe dépend en grande partie de la version de React que vous utilisez et des besoins spécifiques de votre composant.

1. Utilisez des composants fonctionnels lorsque:

   • Vous voulez une syntaxe plus simple et plus concise. Les composants fonctionnels sont plus faciles à lire et à écrire.
   • Vous utilisez React 16.8 ou version ultérieure et pouvez tirer parti des crochets pour la gestion de l'État et les effets secondaires. Des crochets comme useState , useEffect , useContext , etc., rendent les composants fonctionnels plus puissants et polyvalents.
   • Vous souhaitez éviter de gérer this et les méthodes de cycle de vie, qui peuvent être sujettes aux erreurs dans les composants de la classe.
   • Vous cherchez à créer des composants plus testables et plus faciles à refactor.

2. Utilisez des composants de classe lorsque:

   • Vous travaillez avec une ancienne version de React qui ne prend pas en charge les crochets (avant React 16.8).
   • Vous devez utiliser certaines méthodes de cycle de vie qui ne sont pas facilement reproductibles avec des crochets, tels que getDerivedStateFromProps ou getSnapshotBeforeUpdate .
   • Vous maintenez les bases de code existantes qui sont écrites à l'aide de composants de classe, et les refactoriser les composants fonctionnels n'est pas une priorité ou une pratique pour le moment.

Dans le développement de la réaction moderne, les composants fonctionnels avec des crochets sont généralement préférés en raison de leur simplicité et de la capacité de gérer toutes les fonctionnalités qui étaient auparavant exclusives aux composants de classe.

Quelles sont les principales différences dans la gestion des états entre les composants fonctionnels et la classe?

La gestion de l'État dans React a évolué de manière significative avec l'introduction de crochets, affectant la façon dont l'état est géré dans les composants fonctionnels et de classe.

1. État dans les composants de la classe:

   • Les composants de classe gèrent l'état via l'objet state , qui est initialisé dans le constructeur.
   • L'état est accessible et mis à jour à l'aide de this.state et this.setState() .
   • this.setState() est asynchrone et peut accepter une fonction de rappel à exécuter après la mise à jour de l'état.

   • Exemple:

      <code class="javascript">class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } increment = () => { this.setState({ count: this.state.count 1 }); } render() { return ( <div> <p>Count: {this.state.count}</p> <button onclick="{this.increment}">Increment</button> </div> ); } }</code>

2. État dans les composants fonctionnels:

   • Les composants fonctionnels utilisent le crochet useState pour gérer l'état.
   • useState renvoie une variable d'état et une fonction pour la mettre à jour.
   • Les mises à jour de l'état sont synchrones et vous pouvez utiliser immédiatement l'état mis à jour.

   • Exemple:

      <code class="javascript">function Counter() { const [count, setCount] = useState(0); const increment = () => { setCount(count 1); } return ( <div> <p>Count: {count}</p> <button onclick="{increment}">Increment</button> </div> ); }</code>

Les principales différences comprennent:

• Syntaxe: les composants de la classe utilisent this.state et this.setState() , tandis que les composants fonctionnels utilisent des crochets comme useState .
• Mises à jour asynchrones: this.setState() dans les composants de la classe est asynchrone, tandis que les mises à jour avec useState sont synchrones.
• Gestion du cycle de vie: les composants de la classe utilisent des méthodes de cycle de vie pour gérer les effets secondaires, tandis que les composants fonctionnels utilisent useEffect dans le même but.

Comment puis-je optimiser les performances des composants fonctionnels à l'aide de crochets par rapport aux composants de la classe?

L'optimisation des performances des composants React est cruciale pour la construction d'applications efficaces. Les composants fonctionnels avec des crochets offrent plusieurs avantages par rapport aux composants de la classe à cet égard.

1. Mémuisation avec useMemo et useCallback :

   • Dans les composants fonctionnels, vous pouvez utiliser useMemo pour mémoriser des calculs coûteux et useCallback pour mémoriser les fonctions. Cela empêche les redevateurs inutiles en empêchant le recalcul des valeurs ou la recréation des fonctions.

   • Exemple avec useMemo :

      <code class="javascript">function MyComponent({ prop }) { const expensiveResult = useMemo(() => computeExpensiveValue(prop), [prop]); return <div>{expensiveResult}</div>; }</code>

   • Dans les composants de la classe, la réalisation du même niveau d'optimisation nécessite une mise en œuvre manuelle doit composer shouldComponentUpdate ou utiliser React.memo .

2. Éviter les redevances inutiles avec React.memo :

   • React.memo peut être utilisé pour mémoriser les composants fonctionnels, empêchant les redevances inutiles si les accessoires n'ont pas changé.

   • Exemple:

      <code class="javascript">const MyComponent = React.memo(function MyComponent(props) { // Component implementation });</code>

   • Les composants de la classe peuvent utiliser PureComponent ou implémenter shouldComponentUpdate pour obtenir des résultats similaires, mais ces méthodes sont moins flexibles que React.memo .

3. Optimisation des mises à jour d'état avec useState et useReducer :

   • Dans les composants fonctionnels, useState et useReducer peuvent être utilisés en conjonction avec useCallback pour s'assurer que les rappels ne provoquent pas de redevateurs inutiles.

   • Exemple avec useReducer :

      <code class="javascript">const initialState = { count: 0 }; function reducer(state, action) { switch (action.type) { case 'increment': return { count: state.count 1 }; default: throw new Error(); } } function Counter() { const [state, dispatch] = useReducer(reducer, initialState); return (  Count: {state.count} <button onclick="{()"> dispatch({ type: 'increment' })}> </button> > ); }</code>

   • Dans les composants de la classe, les mises à jour d'état sont généralement gérées avec this.setState() , qui peuvent être moins efficaces en termes de réglage des performances.

4. Optimisation du cycle de vie avec useEffect :

   • useEffect dans les composants fonctionnels permet un contrôle à grain fin sur les effets secondaires, y compris les mises à jour basées sur le nettoyage et la dépendance.
   • Cela peut être plus efficace que les méthodes de cycle de vie dans les composants de la classe, où la gestion de plusieurs méthodes de cycle de vie peut devenir complexe et entraîner des problèmes de performance potentiels.

   • Exemple:

      <code class="javascript">function MyComponent() { useEffect(() => { // Side effect code here return () => { // Cleanup code here }; }, [/* dependencies */]); // Component implementation }</code>

En résumé, les composants fonctionnels avec des crochets offrent des moyens plus flexibles et efficaces d'optimiser les performances par rapport aux composants de la classe. En tirant parti des crochets comme useMemo , useCallback et useEffect , les développeurs peuvent obtenir de meilleures performances avec moins de code BULERLAT.

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!