本文旨在解决 React 应用中因鼠标悬停事件（onMouseOver）触发的过度渲染问题。通过将 onMouseOver 替换为 onMouseEnter，并结合 onMouseOut 替换为 onMouseLeave，可以显著减少不必要的组件重新渲染，提升应用性能，尤其是在处理大量组件时。文章将提供示例代码和详细解释，帮助开发者理解并应用这一优化技巧。
在 React 应用中，性能优化至关重要。当组件因为某些交互频繁地重新渲染时，可能会导致应用卡顿，用户体验下降。一个常见的场景是鼠标悬停（hover）效果。如果处理不当，鼠标在组件上移动时触发的 onMouseOver 事件可能会导致组件过度渲染。
问题在于 onMouseOver 事件在鼠标指针进入元素及其子元素时都会触发，这意味着即使鼠标在组件内部移动，也会不断触发 onMouseOver，导致不必要的重新渲染。
解决这个问题的一个简单而有效的方法是使用 onMouseEnter 和 onMouseLeave 事件。
onMouseEnter 事件只在鼠标指针第一次进入元素时触发，而 onMouseLeave 事件只在鼠标指针离开元素时触发。这意味着，即使鼠标在组件内部移动，也不会触发额外的渲染。
以下是修改后的 TechnologyItem.jsx 组件示例：
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 也可以进一步提升组件的渲染性能。
