当某个道具发生变化时，如何避免重新渲染功能组件？

Question

我有一个 PlayArea 组件，其中包含许多 Card 组件作为子组件，用于纸牌游戏。

纸牌的位置由 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} />);
   });

          

Answer 1

这取决于您如何将cardsInPlay 传递给每个Card 组件。只要您只将所需的信息传递给孩子，状态中的数组是否发生变化都没有关系。

例如：

<Card positionX={cardsInPlay[card.id].x} positionY={cardsInPlay[card.id].y} /> 

不会导致重新渲染，因为即使父数组发生变化，实例本身也不会获得新的道具。但是如果你将整个数据传递给每个组件：

<Card cardsInPlay={cardsInPlay} /> 

这将导致所有重新渲染，因为每个Card 都会为每个渲染获得一个新的道具，因为没有两个数组，对象在 Javascript 中是相等的。

P.S : 看到示例代码后编辑

Answer 2

问题是您将整个cardsInPlay 数组传递给每个Card，因此React.memo() 仍将重新渲染每张卡片，因为props 已 已更改。只传递每张卡片需要知道的元素，它只会重新渲染已更改的卡片。您可以使用setCardsInPlay()的functional update签名访问之前的cardsInPlay：

const PlayArea = () => {
  const [cardsInPlay, setCardsInPlay] = useState([]);
  const cards = cardsInPlay.map(
    card => (
      <Card
        key={card.id}
        card={card}
        setCardsInPlay={setCardsInPlay} />
    )
  );

  return (<>{cards}</>);
};

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

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