Comment le code d'aide useCallback s'exécute-t-il plus rapidement ?
P粉924915787
2023-08-18 10:02:15
<p>On dit donc que useCallback peut mettre en cache une fonction, je pense que l'intention est de rendre le code plus rapide. </p>
<p>Par exemple, si j'ai : </p>
<pre class="brush:js;toolbar:false;"> const handleChange = (ev) =>
setMsg(ev.target.value);
} ;
≪/pré>
<p>Je pourrais également le changer en : </p>
<pre class="brush:js;toolbar:false;"> const handleChange = useCallback((ev) => {
setMsg(ev.target.value);
}, []);
≪/pré>
<p>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é ? </p>
<p>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. </p>
<p>Voir :
https://codesandbox.io/s/jolly-nightingale-zxqp8k</p>
<p>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 ? </p>
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 :Ou si
handleChange
作为prop传递给一个组件,并且该组件想要使用React.memo
saute le rendu. Le rendu ne peut être ignoré que lorsque les accessoires n'ont pas changé :