Maison > Article > interface Web > Comprendre `useMemo` et `useCallback` : un guide complet
useMemo et useCallback sont deux puissants hooks React qui jouent un rôle crucial dans la prévention des rendus inutiles qui entraînent l'optimisation des performances des composants. Ce sont des outils essentiels permettant aux développeurs de créer une application React réactive et efficace.
Dans ce guide, nous expliquerons useMemo et useCallback quelles sont leurs similitudes et en quoi ils diffèrent les uns des autres. Nous comprendrons comment les mettre en œuvre, Quand utiliser chacun d'eux.
Habituellement, dans React, la plupart des calculs sont rapides, mais parfois vous avez un calcul sur un très grand tableau, ou des calculs coûteux qui n'ont pas besoin d'être exécutés à chaque nouveau rendu.
Les hooks useMemo et useCallback peuvent aider à résoudre ce problème en mettant en cache ces calculs coûteux entre les nouveaux rendus.
useMemo est un hook React qui met en cache le résultat d'un calcul entre les rendus et il prend deux arguments :
Pour mettre en cache un calcul entre les rendus, enveloppez-le dans un hook useMemo au niveau supérieur du composant.
useMemo(fn, dépendances)
const App = () => { const useMemo(() => { filterTodo(todos, tab) }, [todos, tab]) return(...) } export default App
Remarquez que le premier paramètre de useMemo est une fonction sans paramètre.
La première fois, React calculera la valeur résultat du premier paramètre de useMemo, puis mémorisera le deuxième paramètre qui est la liste des dépendances. React mettra en cache le résultat calculé entre les nouveaux rendus et ne recalculera le résultat que lorsque l'une des valeurs de dépendance change.
Le hook useCallback est le même que le hook useMemo avec la seule différence que ce hook mettra en cache la fonction (premier paramètre pour useCallback) sans calculer la valeur. La fonction peut également accepter des paramètres contrairement à useMemo.
Pour utiliser useCallback, vous devez transmettre des paramètres :
const cachedFn = useCallback(fn, dépendances)
import { useCallback } from 'react'; export default function ProductPage({ productId }) { const handleSubmit = useCallback((orderDetails) => { post('/product/' + productId + '/buy', { referrer, orderDetails, }); }, [productId, referrer]);
Si vous souhaitez principalement optimiser le résultat du calcul, utilisez useMemo.
Si vous souhaitez principalement éviter les rendus inutiles dus à des modifications de fonctions, utilisez useCallback.
Parfois, vous aurez un composant parent qui devra être restitué, ce qui entraînera également le nouveau rendu du composant enfant. Il est possible de mettre en cache un composant à l'aide de mémo.
Supposons que nous ayons un composant Todolist avec un état de thème et un composant List comme enfant. Chaque fois que l'état du thème change, le rendu du composant de liste n'est pas nécessaire. pour résoudre ce problème, utilisez mémo.
nous enveloppons le composant fonctionnel de List avec un mémo.
export default function TodoList({ todos, tab, theme }) { // ... return ( <div className={theme}> <List items={visibleTodos} /> </div> ); }
import { memo } from 'react'; const List = memo(function List({ items }) { // ... });
Dans ce guide complet, nous avons compris les hooks useMemo et useCallback, comment utiliser chacun d'eux, quand utiliser chacun d'eux, et expliqué leurs avantages pour optimiser les performances de l'application React.
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!