听滚动事件做无限滚动..？(Listening to scroll events to do inf

我需要做的无限滚动，所以第一件事情进入了我的脑海，我怎么会知道表的滚动性能？这样我可以决定装载更多的物品和更新状态？

就像，怎么知道有还是没有看到（超出视口）仅10个项目？

我只写了一个无限滚动ReactJS上codepen.io演示，请检查出来，至少给我一个UP，谢谢，哈哈。

不知道如果我能解释清楚，但我已经尽我所能:)

我怎么会知道该表的滚动性能

Answer当你无限滚动，你确定要加载更多的时刻，是当最后一个列表元素是在底部 。首先，我们需要定义的边界，以及一个规则，当用户滚动页面，在这里你会获取更多的数据。

在我的演示中，我设定的容器作为数据获取边界的底线。

// jsx
<div className="container" ref={ref => this.container = ref}>
  { list.map((item, index) => (
    <p className="list-item" key={`item-${index}`}>{ item.name }</p>
  ))}

  <div ref={ref => this.bottomLine = ref}></div>
</div>

// listen to the scroll event of the container
// when the bottom-line element reaches the bottom of the container
// fetchData() will be triggered

componentDidMount() {
  this.container.addEventListener('scroll', () => {
    const CONTAINER_HEIGHT = this.container.getBoundingClientRect().height;
    const { top: bottomLineOffsetTop } = this.bottomLine.getBoundingClientRect();

    if (bottomLineOffsetTop <= CONTAINER_HEIGHT) {
      console.log('load more data');
      this.fetchData();
    }
  });
}

如何知道，仍然只有10个项目没有见过（超出视窗）

Answer另外，你需要一个规则， 以纪念你是否有更多的数据加载 ，或只标注有noMoreData和停止加载。

事实上，在生产环境中，我们不会指望有多少项目都离开了，或许我们不知道。因为我们需要从服务器端请求数据，如RESTful API中，只有这样，我们才会知道是否有更多的项目。

例如，我从请求数据xx.api.com/getList?pageNo=1&size=10 ，这意味着我从第一页开始，我想每页的长度为10。

如果它与空数组或数组响应的长度是小于10，那么我可以标记状态noMoreData为true 。 if (noMoreData === true) ， fetchData()将只返回，不会要求从API的数据了。

fetchData() {
    const { list, pageNo, displayCount, noMoreData } = this.state;

    if (noMoreData) {
      console.log('no more data');
      return;
    }

    if (pageNo > 6) {
      // no more data
      this.setState({
        noMoreData: true
      });
    } else {
      let responseList = [];

      // mock the response of a API request
      for(let i = 0; i < 5; i++) {
        responseList.push({
          name: `from-page-${pageNo}`
        });
      }

      this.setState({
        list: [ ...list, ...responseList ],
        pageNo: pageNo + 1
      });
    }
  }