当某个道具更改时，如何避免重新渲染功能组件？

问题描述

我有一个PlayArea组件，其中有许多作为孩子的Card组件，用于打牌游戏。

纸牌的位置由PlayArea管理，PlayArea的状态值为cardsInPlay，它是CardData对象的数组，其中包括位置坐标。 PlayArea将cardsInPlay和setCardsInPlay（来自useState）传递到每个Card子元素。

卡是可拖动的，在被拖动时，它们会调用setCardsInPlay来更新自己的位置。

当然，结果是cardsInPlay发生了变化，因此每张纸牌都会重新出现。如果将一百张纸牌放在桌子上，这可能会增加成本。

>

如何避免这种情况？ PlayArea和Card都是功能组件。

以下是该描述的简单代码表示形式：

const PlayArea = () => {
  const [cardsInPlay,setCardsInPlay] = useState([]);

  return (
    <>
      { cardsInPlay.map(card => (
        <Card
          key={card.id}
          card={card}
          cardsInPlay={cardsInPlay}
          setCardsInPlay={setCardsInPlay} />
      }
    </>
  );
}

const Card = React.memo({card,cardsInPlay,setCardsInPlay}) => {
    const onDrag = (moveEvent) => {
       setCardsInPlay(
         cardsInPlay.map(cardInPlay => {
           if (cardInPlay.id === card.id) {
              return {
               ...cardInPlay,x: moveEvent.clientX,y: moveEvent.clientY
              };
           }
           return cardInPlay;
        }));
      };

      return (<div onDrag={onDrag} />);
   });

          

解决方法

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

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

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