Reagieren – Die Verwendung von useMemo() führt immer noch dazu, dass die Tastatureingabe langsamer wird

Question

Ich habe diesen Code, der viele Eingabefelder hat. Jedes Eingabefeld wird zum Ändern eines Preiswerts verwendet. Da es viele Eingabefelder gibt (3 Preise pro Bereich und 3 Preise pro Preis), habe ich useMemo für die Funktion verwendet, die den Wert des Eingabefelds aktualisiert, und um zu vermeiden, dass jedes Mal alles neu gerendert wird Ich habe auch useReducer verwendet, um zu vermeiden, dass der Code zur Steuerung des Eingabefelds zu lang wird.

Die Eingabe von Zeichen (oder Zahlen) wird jedoch nicht sofort angezeigt, sondern es dauert eine kurze Zeit, bis sie angezeigt werden, ganz zu schweigen von einer kontinuierlichen Eingabe.

const handleUpdate = useMemo(
    () => (property, valu, obid) =>
      Dispatch({ Typ: "UPDATE_DATA", Eigenschaft, Nutzlast: Wert, ID: obid });
    },
    [versenden]
  );

Und es gibt auch einen Reduzierer:

function Reducer(state, action) {
    switch (action.type) {
...
Fall „UPDATE_DATA“:
        zurückkehren {
          ...Zustand,
          Daten: state.data.map((item) => {
            if (item.id === action.id) {
              return { ...item, [action.property]: action.payload };
            }
            Artikel zurückgeben;
          }),
        };
}
}

Ich empfehle, den gesamten Code zu überprüfen, da das Problem (oder die Lösung) möglicherweise woanders liegt. Um den gesamten Code zu sehen, können Sie auf diesen Sandcodebox-Link verweisen. Bitte verzeihen Sie mir, dass ich einen Teil des Codes kopiert habe, was zu einem schlechten CSS-Format geführt hat. Beachten Sie, dass die Abruffunktion durch ein langes Array simulierter Daten ersetzt wurde.

Link: https://codesandbox.io/s/unruffled-feynman-g9nox2?file=/src/App.js

Answer 1

通常，useMemo 的作用是在渲染期间缓存昂贵计算的值。然而，在您的情况下，您没有任何昂贵的渲染计算；每次输入更改时，您只是渲染一个非常大的树。实际上，因为所有状态都在App组件上，所以每次都会重新渲染整个应用。

在React中优化这个问题的方法是尽可能跳过渲染组件。为此，将页面的不相关部分拆分为不同的组件。一旦分离逻辑，用React.memo()包装它，这是一种可以完全跳过组件渲染的不同优化技术。

对我来说，您可以做出的最明显的更改是：

1. 将TodosDatos移出App组件，因为它是常量，不需要在每次渲染时重新定义（这可能会占用内存）。
2. 将您的<Table>放入一个新的组件中，并使用React.memo()进行记忆。确保将所有表格的依赖值传递给新组件的props。

我在这里实现了这些更改：https://codesandbox.io/s/green-breeze-mmum6n?file=/src/App.js。现在您应该注意到键入几乎是即时的。您还可以在其他地方进行多次优化，以获得更好的性能。