React和样式组件：CSS：hover与onMouseEnter（）和onMouseLeave（）

Question

我目前正在使用React组件对某些React组件进行样式设置，我想知道应该采用哪种方法：

选项1

仅使用props来设置组件的样式，包括“悬停” 属性。使用onMouseEnter和onMouseLeave事件，将名为hovered的道具发送到子组件。

想象一下我有一个列表，我想在该列表的悬停项目上设置蓝色背景。我将悬停的项目索引保存在状态中。

// LIST COMPONENT
// ==============

function ListComponent(props) {

  const [hoveredItem,setHoveredItem]= useState(false);

  function onMouseEnter(index) {
    setHoveredItem(index);
  }
  function onMouseLeave(index) {
    setHoveredItem(false);
  }

  const listItems = props.list.map((item,index) => 
    <ItemComponent 
       key={item}
       onMouseEnter{() => onMouseEnter(index)}
       onMouseLeave = {onMouseLeave}
       hovered = {hoveredItem === index ? true : false}
    >);

  return ( <ul> {listItems} </ul> );
}

// ITEM COMPONENT
// ==============

import styled from 'styled-components';

const StyledItem = styled.li`
  background-color: ${props => props.hovered ? 'blue': 'transparent'};
`;

function ItemComponent(props) {

  return(
    <StyledItem hovered={props.hovered}/>
  );

}

选项2

只需使用简单的 CSS：hover 为我的ItemComponent设置样式：

// LIST COMPONENT
// ==============

function ListComponent(props) {

  const listItems = props.list.map((item,index) => 
    <ItemComponent 
       key={item}
    >);

  return ( <ul> {listItems} </ul> );
}

// ITEM COMPONENT
// ==============

import styled from 'styled-components';

const StyledItem = styled.li`
  background-color: transparent;

  :hover {
    background-color: blue;
  }
`;

function ItemComponent(props) {

  return(
    <StyledItem/>
  );

}

问题

选项1 是更多代码，但我觉得我更加坚持做事的“反应方式”。我还觉得我也许可以使用hovered props然后使用CSS :hover选择器来使用JavaScript执行一些更复杂的任务。

遵循选项1 ，我可以获得任何收益吗？是否有关于此主题的最佳实践？在使用onMouseEnter()和onMouseLeave()而不是:hover时是否存在性能问题？