javascript - 如何防止组件在位于组件外部的悬停事件上重新渲染？

Question

当我悬停包装反应组件的 div 时，我有一种行为会改变页面中元素的不透明度。该行为工作正常。但是，我注意到每次事件触发包装的组件时都会重新渲染。我想避免这种情况。有没有办法防止这种情况？

顺便说一句，我在有问题的组件中使用 React.memo() 。

我非常感谢您能提供的任何帮助。

伪代码

• 检测光标是否在组件上
• 如果确认悬停，则更改另一个组件的不透明度而不重新渲染包装的组件

代码

<div
  role="none"
  onMouseEnter={() => {
    setIsShown(cursorOpacity)
  }}
  onMouseLeave={() => {
    setIsShown(1)
  }}
>
  <SectionHeader />
</div>

标签： javascriptreactjsrendermouseover