你也想让列表无穷滚动吗？

嘿，老友！今天咱聊一聊react-infinite-scroll-component。

这个小组件可真是救星。你想在页面上展示成百上千条数据，却不想一次性把它们全部渲染出来那就来点无限滚动吧。

传统分页加载的用户体验有点卡顿。你翻页又得等待服务器返回，页面跳转时还会失去滚动位置。

无限滚动把“翻页”变成了“继续拉”，用户Ke以顺畅地滑到底部，然后自动拉取下一批。

这在新闻、社交、商品列表等场景里特别常见。

npm install react-infinite-scroll-component

或者用 yarn：

yarn add react-infinite-scroll-component

import React, { useState } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';
export default function Demo {
  const  = useState => `Item #${i}`));
  const fetchMoreData =  => {
    // 模拟异步请求
    setTimeout => {
      setItems(prev => );
    }, 1500);
  };
  return (
    

      Loading...
}
        endMessage={
没有geng多啦！🎉
}
     >
        {items.map =>
          

            {item}
          
        )}
      
    
  );
}

别kan代码多长，核心只有四个属性：

dataLength：

当前Yi渲染的条目数。组件用它判断是否需要触发next。

next：

下拉到阈值时调用的函数，一般写成异步请求。

hasMore：

布尔值，告诉组件还有没没有geng多数据。若为false，就会显示endMessage

第一次加载太少导致容器不可滚动怎么办？

a) 给容器一个固定高度加'overflow:auto',这样即使内容不足也Neng滚动。

b) 在`useEffect`里检查容器高度，Ru果小于窗口高度，就立刻再请求一次直到撑满。

useEffect => {
   const container = document.getElementById;
   if  {
     fetchMoreData;
   }
}, );

NESTED SCROLL BUG：Drawer 或 Modal 中无法触发下拉加载？

a) 指定`scrollableTarget`,给它一个id，比如:

  
     ...
  

b) Ru果还是卡死，尝试把弹窗里的内容拆成单独组件，避免层级过深导致事件失效。

"说实话，我经常碰到有人问我：为什么我的博客被搜索引擎搜不到啊？尤其是百度。有时候，我会告诉他们，其实原因挺多的。Ru果你的站点设置了 robots.txt 禁止爬虫抓取，那自然就不会被索引。Ru果页面内容太重复或者低质量，也可Neng被算法判定为垃圾信息而忽略。还有就是没有足够的外链支持，你站点权重太低，也hen难登顶搜索结果。所以只要保证文件结构清晰、内容原创、有一定流量来源，就Neng让百度正常收录啦。"

"那Ru果我想要geng高性Neng呢？"