React - 使用useMemo()仍然会导致键盘输入速度减慢
P粉340264283
2023-09-03 17:16:59
<p>我有这样的代码，其中有很多输入框，每个输入框都用于修改一个价格值。
由于输入框的数量很多（每个区域有3个价格，每个价格有3个定价），为了避免每次重新渲染所有内容，我在更新输入框值的函数上使用了useMemo，并且除此之外，我还使用了useReducer来避免代码过长以控制输入框。</p>
<p>然而，输入字符（或数字）并不是瞬间显示的，而是需要一段短暂的时间才能显示出来，更不用说连续的输入了。</p>
<pre class="brush:php;toolbar:false;">const handleUpdate = useMemo(
() => (property, valu, obid) => {
dispatch({ type: "UPDATE_DATA", property, payload: valu, id: obid });
},
[dispatch]
);</pre>
<p>而且还有reducer：</p>
<pre class="brush:php;toolbar:false;">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;
}),
};
}
}</pre>
<p>我建议检查整个代码，因为问题（或解决方案）可能在其他地方。为了查看整个代码，您可以参考此sandcodebox链接。请原谅我复制了部分代码，导致css格式不好。
请注意，fetch函数已被模拟数据的长数组替换。</p>
<p>链接：https://codesandbox.io/s/unruffled-feynman-g9nox2?file=/src/App.js</p>
通常，
useMemo的作用是在渲染期间缓存昂贵计算的值。然而，在您的情况下，您没有任何昂贵的渲染计算；每次输入更改时，您只是渲染一个非常大的树。实际上，因为所有状态都在App组件上，所以每次都会重新渲染整个应用。在React中优化这个问题的方法是尽可能跳过渲染组件。为此，将页面的不相关部分拆分为不同的组件。一旦分离逻辑，用
React.memo()包装它，这是一种可以完全跳过组件渲染的不同优化技术。对我来说，您可以做出的最明显的更改是：
TodosDatos移出App组件，因为它是常量，不需要在每次渲染时重新定义（这可能会占用内存）。<Table>放入一个新的组件中，并使用React.memo()进行记忆。确保将所有表格的依赖值传递给新组件的props。我在这里实现了这些更改：https://codesandbox.io/s/green-breeze-mmum6n?file=/src/App.js。现在您应该注意到键入几乎是即时的。您还可以在其他地方进行多次优化，以获得更好的性能。