Partage de technologie

utiliserCallback dans React

2024-07-08

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

introduction

Dans le développement d'applications React, l'optimisation des performances des composants est un processus continu.useCallbackEst un React Hook utilisé pour mémoriser les fonctions de rappel afin de garantir que ces fonctions restent cohérentes tout au long du cycle de vie du composant, évitant ainsi les problèmes inutiles de rendu et de performances.

Contexte du problème

Dans React, si les accessoires ou l'état d'un composant changent, le composant sera restitué. Si un composant enfant dépend des accessoires d'un composant parent et que ces accessoires sont des fonctions, une nouvelle instance de fonction sera créée à chaque rendu du composant parent, ce qui peut également entraîner un nouveau rendu des composants enfants, même si leurs accessoires n'ont pas été rendus. essentiellement changé.

useCallbackrôle

useCallback Utilisé pour résoudre les problèmes ci-dessus. Il mémorise les fonctions de rappel pour garantir que la fonction reste inchangée tout au long de la durée de vie du composant, à moins que ses dépendances ne changent.

useCallbackdescription du paramètre

useCallbackAccepte deux paramètres :

  1. Rappeler: La fonction que vous souhaitez mémoriser.
  2. tableau de dépendances : Un tableau contenant les valeurs des dépendances fonctionnelles. La fonction de rappel n'est recréée que lorsque l'une de ces dépendances change.

La syntaxe de base est la suivante :

const memoizedCallback = useCallback(
  () =