reactjs - React 中的悬停效果太慢（悬停效果的状态更新）

Question

我正在尝试更改列表项的背景颜色，以防用户将鼠标悬停在其顶部。但是当列表大小增加时，悬停效果变得太慢，并且给人一种网站滞后的感觉。

我正在使用材质 UI 和 jss 的 Tree View 组件进行样式设置

重要的代码片段

使用状态

   const [hoverElementId, setHoverElementId] = useState("");

重要功能

 const handleTreeItemMouseHover = (event, label, nodeId) => {
        let hoverKey = generateKey(nodeId, label);
        setHoverElementId(hoverKey);
    }

    const handleRegionSelectUnselect = (value, selectedKey, selected) => {
        let selectedRegions = { ...selectedRegionsLocalState };

        if (selected === true) {
            selectedRegions[selectedKey] = value;
        }
        else {
            delete selectedRegions[selectedKey];
        }

        setSelectedRegionsLocalState(selectedRegions);
    }

const generateKey = (nodeId, name) => {
        return String(nodeId) + "-" + String(name);
    }
const getTreeItemLabel = (labelText, labelData) => {
        let selectedKey = generateKey(labelData.nodeId, labelText);
        let isItemSelected = selectedRegionsLocalState[selectedKey];
        let isItemHovered = selectedKey === hoverElementId
        return (
            <Grid
                onMouseOver={(event) => {
                    handleTreeItemMouseHover(
                        event,
                        labelData.name,
                        labelData.nodeId
                    )
                }}
                style={
                    isItemHovered ? { backgroundColor: "grey" }
                        :
                        isItemSelected ? { backgroundColor: "red" }
                            : {}
                }
                container justify="space-between" >
                <Grid item className={classes.treeItemLabelText}>{labelText}</Grid>
                <Grid item
                    className={classes.selectUnSelectText}
                    onClick={(event) => {
                        handleRegionSelectUnselect(
                            labelData,
                            selectedKey,
                            //toggle value in case selected -> deselect item and vice versa
                            isItemSelected ? false : true
                        )
                        event.preventDefault();
                    }}>
                    {
                        isItemHovered ?
                            (
                                isItemSelected ?
                                    Constants.ClickToDeselectRegion :
                                    Constants.ClickToSelectRegion
                            )
                            :
                            ""
                    }
                </Grid>
            </Grid >
        )
    }

这就是我试图在悬停更改颜色并显示选择或取消选择项目的文本时实现的目标

这是我所说的滞后的例子

光标可能看不到，但当我从海湾城市上去时，它在阿灵顿

如果您想参考整个代码片段

注意：它不起作用，因为我没有在此处添加 redux，这只会使小样本复杂化，以防万一需要让我知道

链接：树视图悬停

如果反应状态更新不是这种方式，请为此提出任何其他方式

标签： reactjsmaterial-uitreeview

Answer 1

对于任何正在寻找答案的人，我现在正在通过 css 进行悬停效果

      .treeItemGrid: {
                    padding: "5px 0 5px 5px",
                    '&:hover': {
                        backgroundColor: "grey",
                    },
                    '&:hover $selectUnSelectText': {
                        display: "block",
                    }
                },
      .selectUnSelectText:{
                       display:"none"
                }

其中树项网格是要悬停的元素，然后 selectUnselectText 是文本“单击以选择”