使用HTML5 Drag n Drop API反应Drag n Drop

如何解决使用HTML5 Drag n Drop API反应Drag n Drop

我正在将HTML5的Drag n Drop API与React元素一起使用，并且在渲染方面遇到一些问题。

我有一个树组件，当我拖动周围的树节点时，如果鼠标在节点的顶部三分之一，我想更新被拖动的节点的css以添加顶部边框，如果如果鼠标位于元素的底部三分之一，则鼠标位于第二个第三和底部边框。

我已经启用了此功能，但是随着节点的拖动越多，树木越大，它开始变得非常缓慢。

这是Tree Component的返回方法（我使用的是Material-ui TreeView）：

return (
            <TreeView
                className={classes.root}
                defaultCollapseIcon={<ExpandMoreIcon />}
                defaultExpanded={['root']}
                defaultExpandIcon={<ChevronRightIcon />}
                draggable={true}
                onDragStart={handleDragStart}
                // ref={drag}
                // opacity={isDragging ? '0.5' : '1'}
            >
                {renderTree(treeData)}

            </TreeView>
    );

这是renderTree方法：

return (
                <TreeItem
                    key={nodes.uuid}
                    nodeId={nodes.uuid}
                    label={nodes.title}
                    draggable={true}
                    onDragOver={(e) => handleDragOver(e,nodes)}
                    onDrop={(e) => handleDrop(e,nodes)}
                    data-rowId={nodes.uuid}
                    style={getBorderStyle(nodes.uuid)}
                >
                    {Array.isArray(nodes.children) ? nodes.children.map((node) => renderTree(node)) : null}
                </TreeItem>
        );

这是我的handleDragOver方法：

const handleDragOver = (event,node) => {
        event.preventDefault();
        event.stopPropagation();

        let rowDropId = event.currentTarget.dataset.rowid;

        if(dragOverObj.id === rowDropId)
            return;

        //Get the mouse offset from the element
        let border = calculateBorderStyle(event);

        //Get the id of the row being dragged over
        let obj = { id: rowDropId,section: border };

        //Set the dragged over id state to update the styling

        setDragOverObj(obj);
    };

这是我的getBorderStyle方法

const getBorderStyle = (uuid) => {
        console.log("get border style",dragOverObj);
        if(dragOverObj.id === uuid) {
            return {border: '1px solid blue'};
        }
        else
            return {border: 'none'};
    };

dragOverObj是状态变量const [dragOverObj,setDragOverObj] = useState({})

我相信发生的事情是，在setDragOverObj中调用handleDragStart时，React检查是否需要重新渲染所有节点，并且getBorderStyles是一种依赖于状态变量dragOverObj只会在节点每次被拖动并且浏览器像疯了一样减速时重新渲染整个树中的每个节点。

我想知道是否应该有一种更正确的方式来做出反应？

非常感谢，非常感谢您的帮助。