我有這樣的程式碼，其中有很多輸入框，每個輸入框都用來修改一個價格值。 由於輸入框的數量很多（每個區域有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
通常，
useMemo的作用是在渲染期間快取昂貴計算的值。然而，在您的情況下，您沒有任何昂貴的渲染計算；每次輸入更改時，您只是渲染一個非常大的樹。實際上，因為所有狀態都在App元件上，所以每次都會重新渲染整個應用程式。在React中優化這個問題的方法是盡可能跳過渲染元件。為此，將頁面的不相關部分拆分為不同的元件。一旦分離邏輯，用
React.memo()#包裝它，這是一種可以完全跳過元件渲染的不同最佳化技術。對我來說，您可以做出的最明顯的更改是：
TodosDatos移出App元件，因為它是常數，不需要在每次渲染時重新定義（這可能會佔用記憶體）。React.memo()進行記憶。確保將所有表格的依賴值傳遞給新元件的props。我在這裡實現了這些更改：https://codesandbox.io/s/green-breeze-mmum6n?file=/src/App.js。現在您應該注意到鍵入幾乎是即時的。您還可以在其他地方進行多次優化，以獲得更好的效能。