React.memo re-renders 没有运行 areEqual 函数的递归组件

Question

我有一个包含评论的页面。一个评论可以包含一个 children 字段，它是一组评论。我有一个呈现 CommentCard 的组件 CommentGroup，如果找到字段 children，则使用 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 和自定义函数，它适用于顶级组件但不适用于 children（嵌套组件）。我用这个函数来调试：

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

日志的数量等于 parent 元素的数量，对于 children 这个功能不是运行即使它是相同的组件。

Answer 1

找到原因了，我在导出时做了备忘，所以children用的元件不是记忆的，我的错

React.memo re-renders 没有运行 areEqual 函数的递归组件

React.memo re-renders recursive components without running the areEqual function

reactjs

recursion

rerender

memo

React.memo re-renders 没有 运行 areEqual 函数的递归组件

React.memo re-renders recursive components without running the areEqual function

reactjs

recursion

rerender

memo

React.memo re-renders 没有运行 areEqual 函数的递归组件