Understanding Rendering and Rerendering in React Apps: How They Work and How to Optimize Them

Lorsque nous créons des applications dans React, nous sommes souvent confrontés aux termes rendu et re-rendu de composants. Bien que cela puisse paraître simple à première vue, les choses deviennent intéressantes lorsque différents systèmes de gestion d'état comme useState, Redux, ou lorsque nous insérons des hooks de cycle de vie comme useEffect sont impliqués. Si vous souhaitez que votre candidature soit rapide et efficace, il est essentiel de comprendre ces processus.

Qu’est-ce que le rendu ?

Le rendu est le processus par lequel React restitue votre interface utilisateur (UI) à l'écran, en fonction de l'état ou des accessoires. Lorsque votre composant est rendu pour la première fois, cela s'appelle le premier rendu.

Comment fonctionne le rendu initial ?

Lorsqu'un composant est "monté" pour la première fois sur le DOM, voici ce qui se passe :

1. Initialisation de l'état :
Que vous utilisiez useState, props ou Redux, l'état initial du composant est créé.

2. Fonction de rendu :
React parcourt le code JSX et génère un DOM virtuel basé sur l'état actuel.

3. Crée un DOM virtuel (Virtual DOM) pour l'état actuel du composant.

4. Comparer (différer) :
Le DOM virtuel est comparé au DOM réel (puisqu'il s'agit du premier rendu, tous les éléments seront entièrement rendus).

5. Affichage :
Le composant est affiché à l'écran.
Une fois le composant rendu, le prochain défi consiste à le rendre.

Re-rendu : quand et pourquoi ?

Le rendu se produit à chaque fois que l'état ou les accessoires changent. Avez-vous cliqué sur le bouton qui modifie le numéro à l'écran ? Vous avez modifié une valeur dans la boutique Redux ? Toutes ces actions peuvent amener React à restituer le composant, et c'est là que le rendu entre en jeu.

Comment fonctionne le rendu ?

Détection de changement d'état :

• Avec useState, lorsque vous appelez setState, React sait qu'il doit mettre à jour le composant.

• Avec Redux, lorsqu'une valeur dans le magasin change, chaque composant associé à cette partie de l'état est restitué.

Déclencheur de rendu :

Lorsque l'état change, React crée un nouveau DOM virtuel basé sur ce changement.

Comparer (différer) :

• React compare le nouveau DOM virtuel avec l'ancien et calcule les modifications à appliquer. C'est une façon pour React d'optimiser le rendu.

Afficher les modifications :

• Une fois les modifications calculées, React les applique au DOM réel. Ainsi, seules les parties modifiées de la page sont à nouveau affichées.

Quels composants sont restitués ?

Tous les composants ne sont pas affectés par chaque changement. React restitue uniquement les composants qui :

Utiliser les états locaux :
Si vous utilisez useState, le composant est restitué à chaque fois que setState.

est appelé

Utiliser l'état Redux :
Si votre composant dépend de l'état Redux (via useSelector ou connect), il sera restitué lorsque cette partie de l'état change.

Utilisez des accessoires :
Si la valeur des accessoires change, le composant est restitué avec les nouvelles valeurs.

Optimisation du rendu

Bien sûr, il n'est pas toujours idéal de restituer inutilement tous les composants. Si nous voulons que l'application fonctionne rapidement et efficacement, voici quelques techniques d'optimisation :

1. Mémorisation des composants
React offre des fonctionnalités de mémorisation de composants via React.memo. Si votre composant ne dépend pas d'accessoires ou de changements d'état, vous pouvez le "souvenir", il ne sera donc restitué que lorsque les valeurs pertinentes changeront.

Exemple :

const MemoizedComponent = React.memo(MyComponent);

2. Mémorisation des fonctions et des valeurs

Pour éviter de recréer des fonctions ou des valeurs à chaque rendu, utilisez useCallback pour mémoriser les fonctions et useMemo pour mémoriser les valeurs.

• useCallback vous permet de mémoriser une fonction et d'empêcher sa recréation jusqu'à ce que les dépendances changent.

• useMemo mémorise le résultat de la fonction, il n'est donc pas recalculé à chaque rendu.

Exemple :

const increment = useCallback(() => {
  setCount(prevCount => prevCount + 1);
}, []);

const expensiveCalculation = useMemo(() => {
  return count * 2;
}, [count]);

3. Optimisation Redux

Si vous utilisez Redux, vous pouvez optimiser davantage votre application avec des sélecteurs mémorisés tels que reselect. Cela permet d'éviter de restituer les composants qui ne sont pas affectés par le changement d'état.

Lifecycle Hook-ovi i Rerenderovanje

U klasičnim React klasama, koristili smo shouldComponentUpdate da kontrolišemo kada će se komponenta ponovo renderovati. U funkcionalnim komponentama, ovaj koncept se može simulirati pomoću useEffect i memoizacije.

Zaključak

Renderovanje i rerenderovanje su ključni za prikaz korisničkog interfejsa u React aplikacijama, ali pravilno razumevanje i optimizacija tih procesa može napraviti razliku između spore i super brze aplikacije. Ispravno korišćenje memoizacije, useCallback, useMemo, kao i pažljivo rukovanje Redux-om, pomaže da izbegnemo nepotrebne re-rendere i održimo naše aplikacije brzim i responzivnim.

Primer Koda: Renderovanje i Rerenderovanje u Akciji
Evo primera komponente koja koristi useState, Redux i memoizaciju da optimizuje renderovanje:

import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { useSelector, useDispatch } from 'react-redux';

const MyComponent = () => {
  // Lokalni state
  const [count, setCount] = useState(0);

  // Redux state
  const reduxValue = useSelector(state => state.someValue);
  const dispatch = useDispatch();

  // Memoizacija funkcije kako bi se izbeglo ponovno kreiranje na svakom renderu
  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  // Memoizacija izračunate vrednosti
  const expensiveCalculation = useMemo(() => {
    return count * 2;
  }, [count]);

  // Efekat koji se pokreće samo pri promeni reduxValue
  useEffect(() => {
    console.log("Redux value changed:", reduxValue);
  }, [reduxValue]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Expensive Calculation: {expensiveCalculation}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={() => dispatch({ type: 'SOME_ACTION' })}>
        Dispatch Redux Action
      </button>
    </div>
  );
};

Kao što vidimo, ovde se koristi kombinacija lokalnog state-a, Redux-a, memoizacije i useEffect hook-a da bi aplikacija bila što efikasnija.

The above is the detailed content of Understanding Rendering and Rerendering in React Apps: How They Work and How to Optimize Them. For more information, please follow other related articles on the PHP Chinese website!