优化 React 组件渲染：解决鼠标悬停导致的过度渲染问题

本文旨在解决 React 应用中因鼠标悬停事件（onMouseOver）触发的过度渲染问题。通过将 onMouseOver 替换为 onMouseEnter，并结合 onMouseOut 替换为 onMouseLeave，可以显著减少不必要的组件重新渲染，提升应用性能，尤其是在处理大量组件时。文章将提供示例代码和详细解释，帮助开发者理解并应用这一优化技巧。

在 React 应用中，性能优化至关重要。当组件因为某些交互频繁地重新渲染时，可能会导致应用卡顿，用户体验下降。一个常见的场景是鼠标悬停（hover）效果。如果处理不当，鼠标在组件上移动时触发的 onMouseOver 事件可能会导致组件过度渲染。

问题在于 onMouseOver 事件在鼠标指针进入元素及其子元素时都会触发，这意味着即使鼠标在组件内部移动，也会不断触发 onMouseOver，导致不必要的重新渲染。

解决这个问题的一个简单而有效的方法是使用 onMouseEnter 和 onMouseLeave 事件。

onMouseEnter 事件只在鼠标指针第一次进入元素时触发，而 onMouseLeave 事件只在鼠标指针离开元素时触发。这意味着，即使鼠标在组件内部移动，也不会触发额外的渲染。

以下是修改后的 TechnologyItem.jsx 组件示例：

百度虚拟主播

百度智能云平台的一站式、灵活化的虚拟主播直播解决方案

36

查看详情

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { setHoveredTechnologyAction } from "../../../store/actions/quadrantActions";
import { hoveredTechnologySelector } from "../../../store/selectors/quadrantSelectors";
import "./technologyItem.scss";

const TechnologyItem = ({ index, name, description, contacts, tags }) => {
  const dispatch = useDispatch();
  const hoveredTechnology = useSelector(hoveredTechnologySelector);
  const isHovered = name === hoveredTechnology;

  const onMouseEnter = () => {
    dispatch(setHoveredTechnologyAction(name));
  };

  const onMouseLeave = () => {
    dispatch(setHoveredTechnologyAction(""));
  };

  return (
    <div
      className={isHovered ? "tech-item-highlighted" : "tech-item"}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
    >
      <p>
        {index}. {name}
      </p>
    </div>
  );
};

export default React.memo(TechnologyItem);

关键修改：

• 将 onMouseOver 替换为 onMouseEnter。
• 将 onMouseOut 替换为 onMouseLeave。

注意事项：

• 确保你的应用已经正确设置了 Redux，并且 setHoveredTechnologyAction 和 hoveredTechnologySelector 能够正常工作。
• React.memo 可以用于优化组件的渲染，但前提是组件的 props 没有发生变化。如果 props 频繁变化，React.memo 可能不会带来性能提升，甚至可能降低性能。
• 如果 TechnologyItem 组件的 props 变化频繁，可以考虑使用 useCallback 来缓存 onMouseEnter 和 onMouseLeave 函数，以避免不必要的重新渲染。

总结：

通过将 onMouseOver 和 onMouseOut 替换为 onMouseEnter 和 onMouseLeave，可以显著减少 React 组件因鼠标悬停事件导致的过度渲染。这种简单的优化技巧可以提高应用的性能，并改善用户体验。在处理大量组件或复杂交互时，这种优化尤为重要。此外，合理使用 React.memo 和 useCallback 也可以进一步提升组件的渲染性能。

以上就是优化 React 组件渲染：解决鼠标悬停导致的过度渲染问题的详细内容，更多请关注php中文网其它相关文章！