Comprendre la mise en cache des dépendances et le référencement de useCallback dans React

Question

Le hook useCallback met-il uniquement en cache la référence de la fonction ou également la valeur/le résultat de la fonction elle-même ? De plus, l'utilisation de ref dans un tableau de dépendances a-t-elle réellement un effet, comme la référence d'un composant ? Si ce n'est pas le cas, existe-t-il un moyen de garantir que les modifications apportées à la valeur de référence ont l'effet approprié ?

Au départ, je pensais que seules les références de fonctions seraient mises en cache, mais après avoir lu un article, j'ai appris que useCallback(fn, deps) est équivalent à useMemo(() => fn, deps), et je ne suis pas sûr si tel est le cas, c'est effectivement le cas. De plus, j'ai essayé d'utiliser la référence du composant comme dépendance (comme Video.js et React-slick), mais je pense que cela n'a pas beaucoup d'impact par rapport aux autres dépendances.

Answer 1

Oui, le but de useCallback est de permettre aux fonctions de conserver leurs références entre les rendus à moins que les dépendances que vous spécifiez ne changent.

Par exemple, si vous avez une fonction f(x,y)=>x+y, vous pouvez utiliser un tableau de dépendances vide useCallback((x,y)=>x+ y,[]), cette fonction ne changera jamais. Il produit toujours un comportement cohérent car il utilise uniquement ses arguments pour analyser la sortie. Cependant, cela peut changer si vous avez une autre fonction h et une autre valeur externe z, et que h est défini comme h(x, y)=>x+y+z, alors vous devez inclure z dans les dépendances afin que si z change, les fonctions renvoyées par f(x,y)=>x+y，你可以使用空的依赖数组useCallback((x,y)=>x+y,[])，这个函数将永远不会改变。它始终会产生一致的行为，因为它只使用其参数来解析输出。但是，如果你有另一个函数h和另一个外部值z，它可能会发生变化，而且h定义为h(x,y)=>x+y+z，那么你需要将z包含在依赖项中，以便如果z发生变化，从useCallback auront de nouvelles références.

Donc, l'utilisation de useCallback的用途通常是当你传递函数时，它不会触发子组件重新渲染，或者当你在子组件的useEffect声明中使用函数作为依赖项时。如果函数内部的操作很昂贵，那么useCallback se fait généralement lorsque vous transmettez une fonction afin qu'elle ne déclenche pas le nouveau rendu d'un composant enfant, ou lorsque vous utilisez une fonction comme dépendance dans la déclaration useEffect d'un composant enfant. Si les opérations à l'intérieur de la fonction sont coûteuses, alors

est moins utile et vous devez mémoriser les résultats séparément.

ref的事情，我认为在依赖项中包含ref并不会有任何作用，它就像数组为空一样。也许如果refA propos de

étant stocké en état, cela pourrait être utile, mais je n'en suis pas si sûr.

Voici un lien https://stackblitz.com/edit/stackblitz-starters-wwyw9f?file=src%2FApp.tsx

, qui contient quelques exemples qui peuvent être utiles.

Je peux également le coller ici s'il risque d'être supprimé.

import * as React from 'react';
import './style.css';

export default function App() {
  //x and y to be used as function arguments
  const [x, setX] = React.useState(0);
  const [y, setY] = React.useState(0);

  //z is variable also used in function calculation but not as an argument
  const [z, setZ] = React.useState(0);

  const ref = React.useRef<number>(0);

  //counter to see how many times function updates
  //will start at 2 cause strict mode but that's no issue really
  const [i, setI] = React.useState(0);

  //function to add x and y from args and add z from state
  const fn = React.useCallback(
    (x: number, y: number) => {
      // console.log(`${x}+${y}`);
      return x + y + z;
    },
    [z] // if you remove z and update it get wrong result
  );

  //update fn count on fn change
  React.useEffect(() => {
    setI((i) => i + 1);
  }, [fn]);

  React.useEffect(() => {
    console.log('nice');
    return () => console.log('ref cleanup');
  }, [ref]);

  return (
    <div>
      <pre>{JSON.stringify({ x, y, z })}</pre>
      <button onClick={() => setX((x) => x + 1)}> x ++</button>
      <button onClick={() => setY((y) => y + 1)}> y ++</button>
      <button onClick={() => setZ((z) => z + 1)}> z ++</button>

      <pre>x+y+z={fn(x, y)}</pre>

      <pre>fnCount:{i}</pre>

      <button
        onClick={() => {
          ref.current = ref.current++;
        }}
      >
        ref++
      </button>
    </div>
  );
}

J'espère que cela vous aidera🎜