如何处理状态改变的事件避免渲染

Question

我正在努力应对鼠标事件“鼠标悬停”的反应。 在每次调用时，我都必须更新状态并将此值传递给另一个组件。

const [posX, setPosX] = useState(0)
...

<Parent onMouseOver={e=> setPosX(e.target.offsetX)}>
  <Children offset={posX} />
</Parent>

所以我的问题是如何避免在更新状态时重新渲染父组件？

Answer 1

您可以使用 useRef（来自 react）。只需将您不想在父级上重新呈现的状态存储为 ref。

const posX = useRef(null);
...

<Parent onMouseOver={e=> posX.current = e.target.offsetX}>
  <Children offset={posX.current} />
</Parent>