原生React中如何高效遍历多组对象数组并通过ID关联数据？

核心优化思路是提前做数据预处理，将需要按ID匹配的数组转换为键为ID的索引结构（Map/普通对象），将查找效率从嵌套遍历的O(n)降低到O(1)，整体时间复杂度从原来的O(帖子数用户数评论数)降至O(帖子数+用户数+评论数)，数据量越大性能优势越明显。

第一步：接口数据返回后，构建索引 #

// 构建用户ID到用户对象的映射
const userMap = new Map(forumUser.map(user => [user.userId, user]))

// 构建帖子ID到对应评论列表的映射
const commentMap = new Map()
forumComment.forEach(comment => {
  const postId = comment.postId
  if (!commentMap.has(postId)) {
    commentMap.set(postId, [])
  }
  // 提前给评论补全用户名信息，避免渲染时重复查询
  const commentUser = userMap.get(comment.userId)
  commentMap.get(postId).push({
    ...comment,
    username: commentUser?.username || '匿名用户'
  })
})

注意：索引构建逻辑只需要在接口数据更新时执行一次即可，函数组件可放在useEffect请求回调中，类组件可放在componentDidMount的请求回调中，不要写在组件渲染函数内部，避免不必要的重复计算。

第二步：渲染逻辑，仅需一层遍历帖子 #

function ForumPage() {
  // 这里省略接口请求、state定义等逻辑
  return (
    <div className="forum-list">
      {forumPost.map(post => {
        // 直接O(1)查询发帖用户和对应评论
        const postAuthor = userMap.get(post.userId)
        const postComments = commentMap.get(post.postId) || []
        
        return (
          <div key={post.postId} className="post-item">
            <h3>{post.postTitle}</h3>
            <p className="post-content">{post.postBody}</p>
            <p className="post-author">By {postAuthor?.name || '匿名用户'}</p>
            <hr />
            <div className="comment-area">
              {postComments.map(comment => (
                <p key={comment.commentId} className="comment-item">
                  {comment.username}: {comment.body}
                </p>
              ))}
            </div>
          </div>
        )
      })}
    </div>
  )
}

方案优势 #

• 彻底避免嵌套遍历，性能提升显著，尤其适合数据量较大的场景
• 数据处理和渲染逻辑分离，代码可读性、可维护性更高
• 可统一处理缺省场景，比如用户信息不存在时统一显示匿名，无需多处重复写判断逻辑

内容的提问来源于stack exchange，提问作者Stu