React - L'utilisation de useMemo() entraîne toujours un ralentissement de la saisie au clavier

Question

J'ai ce code, qui comporte de nombreuses zones de saisie, chaque zone de saisie est utilisée pour modifier une valeur de prix. Comme il y a beaucoup de zones de saisie (3 prix par zone et 3 prix par prix), pour éviter de tout restituer à chaque fois, j'ai utilisé useMemo sur la fonction qui met à jour la valeur de la zone de saisie, et en plus de a également utilisé useReducer pour éviter que le code ne soit trop long pour contrôler la zone de saisie.

Cependant, la saisie de caractères (ou de chiffres) ne s'affiche pas instantanément, mais prend un court laps de temps pour s'afficher, sans parler d'une saisie continue.

const handleUpdate = useMemo(
    () => (propriété, valeur, obid) =>
      dispatch({ type : "UPDATE_DATA", propriété, charge utile : valu, id : obid });
    },
    [expédition]
  );
Et il y a un réducteur : 
function réducteur (état, action) {
    commutateur (action.type) {
...
cas "UPDATE_DATA" :
        retour {
          ...État,
          données : state.data.map((élément) => {
            if (item.id === action.id) {
              return { ...item, [action.property] : action.payload } ;
            }
            retourner l'objet;
          }),
        } ;
}
}
Je recommande de vérifier l'intégralité du code, car le problème (ou la solution) peut résider ailleurs. Afin de voir l'intégralité du code, vous pouvez vous référer à ce lien sandcodebox. Veuillez me pardonner d'avoir copié une partie du code, ce qui a entraîné un mauvais format CSS.
Notez que la fonction fetch a été remplacée par un long tableau de données simulées. 
Lien : https://codesandbox.io/s/unruffled-feynman-g9nox2?file=/src/App.js

Answer 1

Normalement, useMemo 的作用是在渲染期间缓存昂贵计算的值。然而，在您的情况下，您没有任何昂贵的渲染计算；每次输入更改时，您只是渲染一个非常大的树。实际上，因为所有状态都在Appsur le composant, donc l'intégralité de l'application est restituée à chaque fois.

La façon d'optimiser ce problème dans React est d'ignorer les composants de rendu autant que possible. Pour ce faire, divisez les parties non liées de la page en différents composants. Une fois que vous avez séparé la logique, enveloppez-la avec React.memo(), une technique d'optimisation différente qui peut ignorer complètement le rendu des composants.

Pour moi, les changements les plus évidents que vous puissiez apporter sont :

1. sera le composant TodosDatos移出App car il est constant et n'a pas besoin d'être redéfini à chaque rendu (ce qui peut prendre de la mémoire).
2. Mettez votre <Table> dans un nouveau composant et utilisez <Table>放入一个新的组件中，并使用React.memo() pour vous en souvenir. Assurez-vous de transmettre toutes les valeurs de dépendance de table aux accessoires du nouveau composant.

J'ai implémenté ces changements ici : https://codesandbox.io/s/green-breeze-mmum6n?file=/src/App.js. Vous devriez maintenant remarquer que la saisie est presque instantanée. Vous pouvez également effectuer plusieurs optimisations ailleurs pour obtenir de meilleures performances.