React - 使用useMemo()仍然會導致鍵盤輸入速度減慢

Question

我有這樣的程式碼，其中有很多輸入框，每個輸入框都用來修改一個價格值。 由於輸入框的數量很多（每個區域有3個價格，每個價格有3個定價），為了避免每次重新渲染所有內容，我在更新輸入框值的函數上使用了useMemo，並且除此之外，我還使用了useReducer來避免代碼過長以控制輸入框。

然而，輸入字元（或數字）並不是瞬間顯示的，而是需要一段短暫的時間才能顯示出來，更不用說連續的輸入了。

const handleUpdate = useMemo(
    () => (property, valu, obid) => {
      dispatch({ type: "UPDATE_DATA", property, payload: valu, id: obid });
    },
    [dispatch]
  );

而且還有reducer：

function reducer(state, action) {
    switch (action.type) {
…
case "UPDATE_DATA":
        return {
          ...state,
          data: state.data.map((item) => {
            if (item.id === action.id) {
              return { ...item, [action.property]: action.payload };
            }
            return item;
          }),
        };
}
}

我建議檢查整個程式碼，因為問題（或解決方案）可能在其他地方。為了查看整個程式碼，您可以參考此sandcodebox連結。請原諒我複製了部分程式碼，導致css格式不好。 請注意，fetch函數已被模擬資料的長數組取代。

連結：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。現在您應該注意到鍵入幾乎是即時的。您還可以在其他地方進行多次優化，以獲得更好的效能。