如何解决减少React表的重新呈现
我有一个包含两列的表,每列都是可编辑的。该表还包括添加新条目的功能。我遇到的问题是,每当编辑一行时,每一行都会重新呈现。对于较大的表,这在编辑单行时会导致明显的按键延迟。关于如何防止这种情况的任何想法?
在一个“小的”示例中,我无法复制性能问题,但是https://codesandbox.io/s/zen-williams-r8pii?file=/src/App.js是基本功能。我曾尝试在一些地方删除React.memo无济于事(我是这个东西的新手)
感谢您的帮助!
解决方法
有些事情使行重新呈现:
首先需要将行组件包装在React.memo
const ThingRow = React.memo(({ thing,onUpdate }) => {
...
})
然后,onUpdate
也需要与React.useCallback
一起使用,并且为了将useCallback中的依赖关系减少到仅setThings
(请参见注释),您可以使用{ {1}}和setThings
更新项目
.map
遇到此类问题时,您需要寻找一种方式来记住要传递的道具,特别是回调并减少钩子中的依赖项
这是codeandbox分叉https://codesandbox.io/s/table-row-memoization-xs1d2?file=/src/App.js
注意:根据react docs
,React保证setState函数身份稳定,并且在重新渲染时不会更改
您可以尝试几种优化方法。 首先,如果您要处理大量数据,则核心问题可能是您向DOM渲染了太多东西。 如果是这种情况,我将从在表中添加虚拟化或分页开始。 您可以轻松地通过库添加虚拟化,例如使用react-window中的FixedSizeList:
import { FixedSizeList as List } from 'react-window';
const Row = ({ index,style }) => (
<div style={style}>Row {index}</div>
);
const Example = () => (
<List
height={150}
itemCount={1000}
itemSize={35}
width={300}
>
{Row}
</List>
);
这应该已经减少了任何性能问题,但是如果您只想优化转折点: react的默认行为是呈现当前调用了useState setter的组件以及所有子组件,即使未更改任何道具。 因此您应该在备忘录中同时包装ListOfThings和ThingRow以选择退出此行为:
const ListOfThings = memo({ things,setThings }) => {
...
});
const ThingRow = memo(({ thing,onUpdate }) => {
...
});
如果不这样做,更改不相关的标题输入将导致重新呈现所有内容。
最后,您要将一个内联事件处理程序(onUpdate)传递给ThingRow。 这将为ListOfThings的每个渲染创建一个新的函数对象,这将绕过我们之前所做的备忘录优化。 要对此进行优化,可以使用useCallback创建对该函数的持久引用:
onUpdate={useCallback(
thing => setThings(prev => prev.map(t => t.id === thing.id ? thing : t)),[setThings])}
请注意,每当您依赖更新的前一个值时,最好在useState中使用函数更新样式。
小的免责声明:如果您遇到性能问题,我只会使用虚拟化/分页解决方案,而根本不会尝试进行优化。 React的默认渲染行为非常快,而对其进行更改可能会导致难以发现与未更新有关的错误。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。