React Hook实现无限滚动的用法正确性及优化咨询

先直接回应你的核心问题：你的代码基本实现了手动加载更多的逻辑，但在Hook使用上存在一个潜在的闭包风险，同时还有不少可以优化的空间，下面我一步步拆解说明：

一、当前Hook使用的问题 #

你在useEffect里更新allTracks的方式有隐患：

useEffect(() => {
  if (!loading && tracks) setAllTracks([...allTracks, ...tracks]);
}, [loading, tracks]);

这里的allTracks是当前渲染周期的状态快照，如果短时间内多次触发加载（比如快速点击Load More），可能会导致状态覆盖——因为每次更新依赖的是当时的allTracks，而非最新的状态。

正确的做法是使用函数式更新，让React帮你拿到最新的状态：

useEffect(() => {
  if (!loading && tracks?.length) {
    setAllTracks(prevTracks => [...prevTracks, ...tracks]);
  }
}, [loading, tracks]);

这样不管触发多少次更新，都能基于最新的状态去拼接新数据，不会出现丢数据的情况。

另外提个小细节：React组件名建议用大写开头（比如Index而非index），这是React的规范，避免和原生HTML标签混淆。

二、更优的实现方式 #

如果你要实现的是自动无限滚动（而非手动点击按钮），可以结合useEffect监听滚动事件，当滚动到页面底部附近时自动触发加载，示例如下：

自动滚动加载实现 #

export default function Index() { 
  const [allTracks, setAllTracks] = useState([]); 
  const [offset, setOffset] = useState(""); 
  const { tracks, error, loading, lastVisible } = useFetchPublicTracks( 
    myApiEndPoint.TRENDING_TRACKS, 5, offset 
  ); 

  // 用函数式更新避免闭包问题
  useEffect(() => {
    if (!loading && tracks?.length) {
      setAllTracks(prev => [...prev, ...tracks]);
    }
  }, [loading, tracks]);

  // 监听滚动事件，自动触发加载
  useEffect(() => {
    const handleScroll = () => {
      // 距离底部200px时触发加载，可根据需求调整阈值
      const isNearBottom = window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 200;
      // 避免重复请求，且确保有更多数据可加载
      if (isNearBottom && !loading && lastVisible) {
        setOffset(lastVisible);
      }
    };

    // 添加防抖，避免频繁触发请求
    const debouncedScroll = setTimeout(handleScroll, 300);
    window.addEventListener('scroll', debouncedScroll);
    
    return () => {
      clearTimeout(debouncedScroll);
      window.removeEventListener('scroll', debouncedScroll);
    };
  }, [loading, lastVisible]);

  // 错误处理
  if (error) return <div>加载失败：{error.message}</div>;
  // 无更多数据提示
  if (!loading && !lastVisible && allTracks.length) return <div>已加载全部内容</div>;

  return ( 
    <div> 
      {loading && <div>加载中...</div>}
      <Main tracks={allTracks}></Main> 
    </div> 
  ); 
}

其他优化点 #

• 避免重复请求：始终在请求前判断loading状态，确保同一时间只有一个请求在进行；
• 空状态处理：当没有数据时，显示“暂无内容”的提示，提升用户体验；
• 错误重试：可以给useFetchPublicTracks添加重试逻辑，或在页面上显示重试按钮。

三、是否需要使用useCallback/useMemo？ #

这取决于你的具体场景，不是必须，但在特定情况下能优化性能：

• useCallback：
  • 如果你把滚动回调或Load More回调作为props传递给了用React.memo包裹的子组件，需要用useCallback包裹回调函数，避免因函数引用变化导致子组件不必要的重渲染：

    const handleLoadMore = useCallback(() => {
      if (!loading && lastVisible) setOffset(lastVisible);
    }, [loading, lastVisible]);
    

• useMemo：
  • 如果allTracks需要经过复杂计算（比如过滤、排序）再传递给Main组件，用useMemo缓存计算结果，避免每次渲染都重复计算：

    const processedTracks = useMemo(() => {
      return allTracks.filter(track => track.isPublic).sort((a,b) => b.likes - a.likes);
    }, [allTracks]);
    

  • 注意：只有当Main组件用React.memo包裹时，useMemo的优化才会生效，否则子组件还是会每次重渲染。

如果你的场景只是简单拼接数据并传递，没有复杂计算或频繁重渲染的问题，暂时不需要useCallback/useMemo——过早优化反而会增加代码复杂度。

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