Maison >interface Web >js tutoriel >Comment éviter le re-rendu inutile des composants React
Comprendre comment React Native rend les composants est essentiel pour créer des applications efficaces et performantes. Lorsque l'état ou les accessoires d'un composant changent, React met automatiquement à jour l'interface utilisateur (UI) pour refléter ces changements. En conséquence, React appelle à nouveau la méthode de rendu du composant pour générer la représentation mise à jour de l'interface utilisateur.
Dans cet article, nous explorerons trois React Hooks et comment ils empêchent les rendus inutiles dans React
Ces outils nous permettent d'optimiser notre code en évitant les rendus inutiles, en améliorant les performances et en stockant efficacement les valeurs.
À la fin de cet article, nous comprendrons mieux comment rendre nos applications React plus rapides et plus réactives à l'aide de ces hooks React pratiques.
Dans React, useMemo peut éviter les rendus inutiles et optimiser les performances.
Explorons comment le hook useMemo peut empêcher les nouveaux rendus inutiles dans nos composants React.
En mémorisant le résultat d'une fonction et en suivant ses dépendances, useMemo garantit que le processus n'est recalculé que lorsque cela est nécessaire.
Considérons l'exemple suivant :
import { useMemo, useState } from 'react'; function Page() { const [count, setCount] = useState(0); const [items] = useState(generateItems(300)); const selectedItem = useMemo(() => items.find((item) => item.id === count), [ count, items, ]); function generateItems(count) { const items = []; for (let i = 0; i < count; i++) { items.push({ id: i, isSelected: i === count - 1, }); } return items; } return ( <div className="tutorial"> <h1>Count: {count}</h1> <h1>Selected Item: {selectedItem?.id}</h1> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); } export default Page;
Le code ci-dessus est un composant React appelé Page qui utilise useMemo pour optimiser le calcul de l'élément sélectionné.
Voici l'explication :
L'utilisation de useMemo optimise les performances en mémorisant le résultat de l'opération items.find. Il garantit que le calcul de selectedItem n'est effectué que lorsque les dépendances (nombre ou éléments) changent, évitant ainsi les recalculs inutiles lors des rendus ultérieurs.
La mémorisation doit être utilisée de manière sélective pour les opérations gourmandes en calcul, car elle introduit une surcharge supplémentaire dans le processus de rendu.
Le hook useCallback dans React permet la mémorisation des fonctions, empêchant leur recréation lors du rendu de chaque composant. En utilisant useCallback. une pièce n'est créée qu'une seule fois et réutilisée dans les rendus ultérieurs tant que ses dépendances restent inchangées.
Considérons l'exemple suivant :
import React, { useState, useCallback, memo } from 'react'; const allColors = ['red', 'green', 'blue', 'yellow', 'orange']; const shuffle = (array) => { const shuffledArray = [...array]; for (let i = shuffledArray.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]]; } return shuffledArray; }; const Filter = memo(({ onChange }) => { console.log('Filter rendered!'); return ( <input type='text' placeholder='Filter colors...' onChange={(e) => onChange(e.target.value)} /> ); }); function Page() { const [colors, setColors] = useState(allColors); console.log(colors[0]) const handleFilter = useCallback((text) => { const filteredColors = allColors.filter((color) => color.includes(text.toLowerCase()) ); setColors(filteredColors); }, [colors]); return ( <div className='tutorial'> <div className='align-center mb-2 flex'> <button onClick={() => setColors(shuffle(allColors))}> Shuffle </button> <Filter onChange={handleFilter} /> </div> <ul> {colors.map((color) => ( <li key={color}>{color}</li> ))} </ul> </div> ); } export default Page;
Le code ci-dessus démontre une fonctionnalité simple de filtrage et de brassage des couleurs dans un composant React. Passons en revue étape par étape :
Le hook useCallback est utilisé pour mémoriser la fonction handleFilter, ce qui signifie que la fonction n'est créée qu'une seule fois et réutilisée lors des rendus suivants si les dépendances (dans ce cas, l'état des couleurs) restent les mêmes.
This optimization prevents unnecessary re-renders of child components that receive the handleFilter function as a prop, such as the Filter component.
It ensures that the Filter component is not re-rendered if the colors state hasn't changed, improving performance.
Another approach to enhance performance in React applications and avoid unnecessary re-renders is using the useRef hook. Using useRef, we can store a mutable value that persists across renders, effectively preventing unnecessary re-renders.
This technique allows us to maintain a reference to a value without triggering component updates when that value changes. By leveraging the mutability of the reference, we can optimize performance in specific scenarios.
Consider the following example:
import React, { useRef, useState } from 'react'; function App() { const [name, setName] = useState(''); const inputRef = useRef(null); function handleClick() { inputRef.current.focus(); } return ( <div> <input type="text" value={name} onChange={(e) => setName(e.target.value)} ref={inputRef} /> <button onClick={handleClick}>Focus</button> </div> ); }
The example above has a simple input field and a button. The useRef hook creates a ref called inputRef. As soon as the button is clicked, the handleClick function is called, which focuses on the input element by accessing the current property of the inputRef ref object. As such, it prevents unnecessary rerendering of the component when the input value changes.
To ensure optimal use of useRef, reserve it solely for mutable values that do not impact the component's rendering. If a mutable value influences the component's rendering, it should be stored within its state instead.
Throughout this tutorial, we explored the concept of React re-rendering and its potential impact on the performance of our applications. We delved into the optimization techniques that can help mitigate unnecessary re-renders. React offers a variety of hooks that enable us to enhance the performance of our applications. We can effectively store values and functions between renders by leveraging these hooks, significantly boosting React application performance.
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!