我如何才能足够快地更新反应状态，使悬停效果感觉有反应

Question

我想知道是否有办法让它发挥作用。你可以查看我在下面添加的片段。

import React, { useState } from "react";
import Item from "./Item";
export default function App() {
const [hoveredItem, setHoveredItem] = useState(null);
const items = [...Array(5000).keys()];
const handleMouseEnter = (item) => {
setHoveredItem(item);
};
return (
<div className="App">
{items.map((item) => (
<Item
key={item}
isHover={hoveredItem === item}
onMouseEnter={() => handleMouseEnter(item)}
>
Item {item}
</Item>
))}
</div>
);
}

上面的代码只是一个片段，使用伪类(：hover(无法满足我的需要。悬停的项目的id需要处于状态。

如果你想玩的话，这里有一个代码沙盒链接：https://codesandbox.io/s/floral-cache-wfxws

Answer 1

我使用钩子：

const [hover, setHover] = useState(false)
return (
<div>
<div
onMouseOver={()=>setHover(true)}
onMouseOut={()=>setHover(false)}
className={" " + (hover ? "my-css-class" : "") }>
My text
</div>
</div>
)