React.memo 在不运行 areEqual 函数的情况下重新渲染递归组件

问题描述

我有一个带有评论的页面。一个评论可以包含一个子字段，它是一个评论数组。 我有一个组件 CommentGroup，它呈现一个 CommentCard，如果找到了 children 字段，另一个 CommentGroup 将与孩子一起呈现。 这是它的样子：

<div className={styles.commentsWrapperElements}>
  <div className={styles.commentsWrapperElementsParent}>
      <CommentCard
          comment={comment}
          key={comment.id}
          collapsed={collapsed}
          onReplyClick={onReplyClick}
          onDeleteClick={onDeleteClick}
          repliedTo={replyToId === comment.id}
          order={order}
      />
  </div>
  {comment?.children?.length > 0 ?
      <div className={styles.commentsWrapperElementsChildren}>
          {comment.children.map(e => <CommentCardGroup
              comment={e}
              replyToId={replyToId}
              onDeleteClick={onDeleteClick}
              onReplyClick={onReplyClick}
              key={e.id}
              addComment={addComment}
              order={order}
          />)}
      </div> : <></>
  }
</div>

我在这个带有自定义函数的组件上使用 React.memo，它适用于顶级组件，但不适用于子组件（嵌套组件）。我用这个函数来调试：

export function areEqual(prevProps,nextProps) {
    console.log('-');
    return false;
}

日志的数量等于父元素的数量，即使是相同的组件，也不会为子元素运行此函数。

解决方法

我找到原因了，我在导出时做了备忘录，所以孩子们使用的组件不是记忆的组件，我的错。