Question

在指定了组件的子代之后，对我来说，记忆化似乎不起作用。

    char_sprite = Resources.Load<Sprite>("Art/GamesPlusJames_RPG-Character_0");

在多个大括号中，该组件每次都重新渲染。

const Cell = React.memo(({ children }) => {
  return (
    <div>{children}</div>
  );
});

与一个大括号相反，该大括号仅按预期呈现一次。

<Cell key={`o${outerIndex}i${innerIndex}`}>
  {`${outerIndex}`}
  {`${innerIndex}`}
</Cell>

我已经创建了一个人为的codesandbox示例来说明这一点。

第<Cell key={`o${outerIndex}i${innerIndex}`}> {`${outerIndex}${innerIndex}`} </Cell>行是有问题的。请参阅上方的评论。

Answer 1

让我们记录> gg <- ggplot(aes(x=category, y=mean, fill=split (labels=c("k-NN","Decision trees")), group=split, data=data) > gg <- gg + geom_bar(stat='identity', position = position_dodge(), width=.5) > gg <- gg + geom_errorbar(aes(ymin=mean-sd, ymax=mean+sd), position = position_dodge(width=.5), width=.2) > gg <- gg + scale_x_discrete(labels=c("Accuracy", "Precision", "Recall")) > gg <- gg + xlab("Precision metrics") + ylab("Mean") + labs (fill="Classifier") > gg + theme_classic() Error in deparse(...) : unused argument (labels = c("k-NN", "Decision trees"))，看看会发生什么：

<div class ="user-photo">
  <img src ="https://www.placeholder.com/150" alt= "user photo">
</div>

对于

children

您得到

const Cell = React.memo(({ children }) => {
  console.log(children);
  return <div>{children}</div>;
});

对于

{`${outerElem}${innerElem}`}

您得到：

如React.memo文档中所述，将进行以下比较：

{`${outerElem}`}
{`${innerElem}`}

Demo

要解决该问题，“提供自定义比较功能作为第二个参数” 。

["0", "0"]
["0", "1"]
["1", "0"]
["1", "1"]

为什么双花括号的子代会导致我的React.memo组件重新渲染，即使它们的值相同？

1 个答案: