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

问题描述

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

顺便说一下，我在相关组件中使用了 React.memo()。

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

伪代码

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

代码

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）