微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

每次使用 react-beautiful-dnd 时都列出重新渲染

如何解决每次使用 react-beautiful-dnd 时都列出重新渲染

长话短说:

  • 我将 provided 道具传递给可拖动元素,以便在元素内呈现句柄
<Draggable key={item.id} draggableId={item.id} index={index}>
    {(provided,snapshot) => (
        <div
            ref={provided.innerRef}
            {...provided.draggableProps}
            style={getItemStyle(
                snapshot.isDragging,provided.draggableProps.style,)}
        >
            <Element
                key={item.id}
                ...
                provided={provided}
            />
        </div>
    )}
</Draggable>

一切正常,直到列表变长(100+)个元素。 现在,每次发生任何变化时,都会重新渲染整个元素列表。

我已检查 DevTools Performance,并且提供了重新渲染的原因,该原因在每个循环中都会发生变化。

我不能在回调中使用备忘录。 问题的解决方案是什么(除了将手柄移到 Element 外)?

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。