React 中的悬停效果太慢（悬停效果的状态更新）答案

【问题标题】：Hover Effect in React is too slow (state update for hover effects)React 中的悬停效果太慢（悬停效果的状态更新）
【发布时间】：2021-11-15 06:51:26
【问题描述】：

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

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

重要的代码片段

使用状态

   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 >
        )
    }

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

这是我所说的滞后的例子

光标可能不可见，但我去的时候它在阿灵顿从海湾城市向上

整个代码 sn-p 以备参考

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

链接：Tree view hover

如果反应状态更新不是这种方式，请建议任何其他方式

【问题讨论】：

标签： reactjs material-ui treeview

【解决方案1】：

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

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

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

【讨论】：