如何实现类似Facebook的动态信息流推荐动态插入功能？

核心思路 #

抛弃硬编码切片的固定模式，通过合成混合信息流列表的方式，将帖子内容与推荐模块按照自定义规则动态合并，再统一渲染。同时适配无限滚动逻辑，每次加载新帖子后自动重新生成混合列表，实现类似Facebook的灵活推荐插入效果。

具体实现步骤 #

1. 定义推荐插入规则 #

先明确推荐的插入逻辑，可根据需求调整，示例采用「固定间隔+单次开头插入」的组合规则：

// 推荐类型标识
const RECOMMENDATION_TYPES = {
  AUTHOR: 'author',
  NEWSLETTER: 'newsletter'
};

// 插入规则配置：3条帖子后插作者推荐，之后每6条帖子插通讯推荐
const INSERT_RULES = [
  { type: RECOMMENDATION_TYPES.AUTHOR, afterPostCount: 3 },
  { type: RECOMMENDATION_TYPES.NEWSLETTER, afterPostCount: 6 }
];

2. 编写混合列表生成函数 #

这个函数负责将原始帖子列表与推荐内容按规则合并，生成可直接渲染的混合列表：

const generateMixedFeed = (posts, authorReady, newsletterReady) => {
  const mixedFeed = [];
  let postIndex = 0;
  let ruleIndex = 0;
  let currentRule = INSERT_RULES[ruleIndex];
  let postsSinceLastRec = 0;

  while (postIndex < posts.length) {
    // 添加当前帖子
    mixedFeed.push({ type: 'post', data: posts[postIndex] });
    postIndex++;
    postsSinceLastRec++;

    // 检查是否满足当前推荐插入条件
    if (currentRule && postsSinceLastRec >= currentRule.afterPostCount) {
      // 仅当推荐内容加载完成时才插入
      if (currentRule.type === RECOMMENDATION_TYPES.AUTHOR && authorReady) {
        mixedFeed.push({ type: RECOMMENDATION_TYPES.AUTHOR });
        ruleIndex++; // 作者推荐仅插入一次，切换到下一个规则
        currentRule = INSERT_RULES[ruleIndex];
      } else if (currentRule.type === RECOMMENDATION_TYPES.NEWSLETTER && newsletterReady) {
        mixedFeed.push({ type: RECOMMENDATION_TYPES.NEWSLETTER });
        postsSinceLastRec = 0; // 重置计数，循环插入通讯推荐
      }
    }
  }

  return mixedFeed;
};

3. 改造组件渲染逻辑 #

将原硬编码的分段渲染替换为混合列表的统一渲染，同时适配无限滚动：

import React, { useState, useMemo } from 'react'

export default function App() {
  // 缓存混合信息流列表，仅当依赖项变化时重新生成
  const mixedFeed = useMemo(() => {
    const authorReady = !adminManagedDataLoading?.readingPageManagment?.authors;
    const newsletterReady = adminManagedData?.readingPageManagment?.newsLetters?.length > 1 && !adminManagedDataError;
    return generateMixedFeed(newsFeed?.posts || [], authorReady, newsletterReady);
  }, [newsFeed?.posts, adminManagedDataLoading, adminManagedData, adminManagedDataError]);

  return (
    <InfiniteScroll
      dataLength={newsFeed?.posts.length || 0}
      next={fetchPosts}
      hasMore={hasMore}
      loader={<TweetSkeleton />}
      refreshFunction={fetchPosts}
      pullDownToRefresh
      pullDownToRefreshThreshold={50}
    >
      {mixedFeed.map((item, index) => {
        switch (item.type) {
          case 'post':
            return (
              <Tweet
                tweetClassName={tweetClassName}
                key={`post-${item.data._id}`}
                tweet={item.data}
                user={user}
              />
            );
          case RECOMMENDATION_TYPES.AUTHOR:
            return <PremiumAuthorsSectionWrapper key={`rec-author-${index}`} />;
          case RECOMMENDATION_TYPES.NEWSLETTER:
            return (
              <div className="w-[95%] sm:w-full mx-auto" key={`rec-newsletter-${index}`}>
                <AllNewslettersSectionWrapper intractive={true} />
              </div>
            );
          default:
            return null;
        }
      })}
    </InfiniteScroll>
  )
}

// 推荐类型标识
const RECOMMENDATION_TYPES = {
  AUTHOR: 'author',
  NEWSLETTER: 'newsletter'
};

// 插入规则配置
const INSERT_RULES = [
  { type: RECOMMENDATION_TYPES.AUTHOR, afterPostCount: 3 },
  { type: RECOMMENDATION_TYPES.NEWSLETTER, afterPostCount: 6 }
];

// 混合列表生成函数
const generateMixedFeed = (posts, authorReady, newsletterReady) => {
  const mixedFeed = [];
  let postIndex = 0;
  let ruleIndex = 0;
  let currentRule = INSERT_RULES[ruleIndex];
  let postsSinceLastRec = 0;

  while (postIndex < posts.length) {
    mixedFeed.push({ type: 'post', data: posts[postIndex] });
    postIndex++;
    postsSinceLastRec++;

    if (currentRule && postsSinceLastRec >= currentRule.afterPostCount) {
      if (currentRule.type === RECOMMENDATION_TYPES.AUTHOR && authorReady) {
        mixedFeed.push({ type: RECOMMENDATION_TYPES.AUTHOR });
        ruleIndex++;
        currentRule = INSERT_RULES[ruleIndex];
      } else if (currentRule.type === RECOMMENDATION_TYPES.NEWSLETTER && newsletterReady) {
        mixedFeed.push({ type: RECOMMENDATION_TYPES.NEWSLETTER });
        postsSinceLastRec = 0;
      }
    }
  }

  return mixedFeed;
};

4. 扩展优化方向 #

• 动态规则配置：将INSERT_RULES改为从接口获取，实现后台控制推荐插入频率与位置
• 随机插入逻辑：修改generateMixedFeed，在指定范围内随机生成插入位置，避免固定间隔的生硬感
• 推荐内容去重：添加逻辑避免重复展示同一推荐模块
• 性能优化：对推荐组件添加缓存，减少不必要的重渲染

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