Comment le code d’aide useCallback s’exécute-t-il plus rapidement ?

Question

On dit donc que useCallback peut mettre en cache une fonction, je pense que l'intention est de rendre le code plus rapide.

Par exemple, si j'ai :

 const handleChange = (ev) =>
    setMsg(ev.target.value);
  } ;
≪/pré>
Je pourrais également le changer en : 
 const handleChange = useCallback((ev) => {
    setMsg(ev.target.value);
  }, []);
≪/pré>
La fonction est désormais mise en cache. Cependant, cette fonction doit-elle de toute façon être créée lorsque le composant est restitué ? 
Pour le tester, je l'ai changé en IIFE afin que la fonction soit sortie de celui-ci, et il afficherait que la fonction était en train d'être sortie. 
Voir :
https://codesandbox.io/s/jolly-nightingale-zxqp8k
Ainsi, chaque fois que vous tapez quelque chose dans la zone de saisie, une nouvelle fonction sera affichée, comme indiqué dans la console. Cela signifie que l'IIFE sera exécuté à chaque fois, ce qui signifie également que le littéral de fonction sera converti en objet fonction à chaque fois, même s'il ne s'agit pas d'un IIFE. Alors, comment ce code d’aide s’exécute-t-il plus rapidement ? 

Answer 1

Oui, c'est exact. Chaque rendu crée une nouvelle fonction, qui est ensuite remplacée par la fonction mise en cache.

L'accélération n'est pas due au fait de sauter l'étape de création de la fonction, mais au fait que d'autres codes sont capables de sauter leur propre travail. En effet, s’ils reçoivent la même fonction à chaque fois, ils savent que rien de pertinent n’a changé.

Par exemple, si vous devez inclure handleChange传递给useEffect dans un tableau de dépendances, il est important de passer une référence stable à chaque fois, sinon l'effet sera réexécuté à chaque rendu :

useEffect(() => {
  // ... 使用handleChange做一些事情
}, [handleChange]);

Ou si handleChange作为prop传递给一个组件，并且该组件想要使用React.memo saute le rendu. Le rendu ne peut être ignoré que lorsque les accessoires n'ont pas changé :

const Parent = () => {
  const handleChange = useCallback((ev) => {
    setMsg(ev.target.value);
  }, []);
  return <Child handleChange={handleChange}/>
}

const Child = React.memo(({ handleChange }) => {
  // ... 使用handleChange做一些事情
})