3
votes

Dans React Hook useCallback, Comment sont utilisés (a, b)

Dans la documentation de react hooks, ils donnent un exemple d'utilisation de useCallback a > Réagissez comme suit:

<SignMeUp signupCallback={memoizedsignupCallback} />

J'ai un exemple qui a un rappel qui est appelé avec un paramètre (pas a ou b) et il semble fonctionner. Veuillez m'expliquer ce que sont a, b et comment ils sont censés être utilisés. Voici mon code de travail utilisant un rappel.

const signupCallback = email => {
  return console.log(`sign up called with email ${email}`);
};

const memoizedsignupCallback = useCallback(() => {
  signupCallback();
}, []);

et l'appel qui utilise le rappel.

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

reactjs react-hooks

1 commentaires

Le tableau Dependencies (second argument dans useCallback ) reflète essentiellement les arguments qui sont passés au callback.

3 Réponses :

1
votes

Voici le tableau de valeurs dont dépend le hook. Lorsque ces valeurs changent, le hook se réexécute. Si vous ne passez pas ce paramètre, le hook évaluera chaque fois que le composant sera rendu. Si vous passez [] , il ne sera évalué que sur le rendu initial.

La documentation à ce sujet est disponible ici: https: // reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect .

Si vous passez ce tableau de paramètres, il est très important d'inclure tout l'état qui peut changer et qui est référencé dans la fermeture du crochet. Si vous oubliez d'inclure quelque chose, les valeurs de la fermeture deviendront obsolètes. Il existe une règle eslint qui vérifie ce problème (la discussion liée contient également plus de détails): https: //github.com/facebook/react/issues/14920 .

2 commentaires

Ma question porte sur a, b. Pas le []

Comme mentionné dans la réponse, ce sont les variables capturées par la fermeture. Lorsque les variables de ce tableau changent de valeur, le hook s’exécute, si elles ne changent pas de valeur, ce n’est pas le cas. En d’autres termes, si le tableau est vide, un changement en ‘a’ n’exécutera pas correctement à nouveau ‘doSomething’. Je recommande de consulter les ressources liées pour plus de détails.

0
votes

L'utilisation du paramètre a, b dépend du fait que la fonction que vous essayez d'exécuter les extrait ou non de la portée englobante.

Lorsque vous créez une fonction comme

const signupCallback = email => {
  return console.log(`sign up called with email ${email}`);
};

const memoizedsignupCallback = useCallback(() => {
  signupCallback();
}, []);

Dans le cas ci-dessus, memoizedsignupCallback est créé lors du rendu initial et il aura accès aux valeurs de la fermeture englobante lors de sa création. Pas si vous voulez accéder à une valeur qui se trouve dans sa fermeture mais qui peut être mise à jour en raison d'une interaction, vous devez recréer le rappel mémorisé et par conséquent, vous passerez les arguments à useCallback.

Cependant, dans votre cas, la valeur utilisée par memoizedsignupCallback est transmise par l'appelant lors de l'exécution de la méthode et donc cela fonctionnerait correctement

DÉMO

3 commentaires

Merci @Shubman. Je suis en quelque sorte le suivant. Pourriez-vous mettre à jour le code ci-dessus pour montrer un exemple de ce à quoi cela pourrait ressembler avec le code provenant de la portée englobante? J'ai essayé moi-même et j'ai eu des erreurs de syntaxe.

@PeterKellner Sure ajoutera des exemples dans un certain temps

@PeterKellner a ajouté la démo

1
votes

Vous avez raison de dire que useCallback est utilisé pour mémoriser une fonction. Vous pouvez considérer a et b (ou tout ce qui est utilisé dans le deuxième argument de useCallback ) comme les clés de la fonction mémorisée. Lorsque a ou b change, une nouvelle fonction est créée.

Ceci est particulièrement utile lorsque vous souhaitez que quelque chose soit appelé sur un code onClick > qui nécessite certaines valeurs des accessoires de votre composant.

Similaire à votre exemple au lieu de créer une nouvelle fonction sur chaque rendu:

const Signup = ({ email, onSignup }) => {
  const onClick = useCallback(() => onSignup(email), [email, onSignup]);
  return <button onClick={onClick} />;
}

vous utiliseriez useCallback : p>

const Signup = ({ email, onSignup }) => {
  return <button onClick={() => onSignup(email) } />;
}

Cela garantira qu'une nouvelle fonction est créée et transmise à onClick uniquement si email ou onSignup code> changer.

0 commentaires