问题描述

我正在寻找使用 React 实现无限滚动的方法。我遇到了 react-infinite-scroll，发现它没有效率，因为它只是将节点添加到 DOM 中，并且不会将其删除。有没有任何证明的解决方案与 React，它将添加，删除和维护常量数量的节点在 DOM 中。

这是 jsfiddle 问题。在这个问题中，我一次只想在 DOM 中只有 50 个元素。当用户上下滚动时，应加载和删除其他应用程序。我们已经开始使用 React，因为它是优化算法。现在我找不到这个问题的解决方案。我遇到了 airbnb infinite js 。但它是用 Jquery 实现的。要使用这个 airbnb 无限滚动，我必须松开我不想做的 React 优化。

示例代码我想添加滚动是 (这里我正在加载所有项目，我的目标是一次只加载 50 个项目)

/** @jsx React.DOM */

var Hello = React.createClass({
    render: function() {
        return (<li>Hello {this.props.name}</li>);
    }
});

var HelloList = React.createClass({ 
     getInitialState: function() {                            
         var numbers =  [];
         for(var i=1;i<10000;i++){
             numbers.push(i);
         }
         return {data:numbers};
     },

    render: function(){
       var response =  this.state.data.map(function(contact){          
          return (<Hello name="World"></Hello>);
        });

        return (<ul>{response}</ul>)
    }
});

React.renderComponent(<HelloList/>, document.getElementById('content'));

寻找帮助…

最佳解决方案

基本上当滚动时，您想要确定哪些元素是可见的，然后再渲染以仅显示那些元素，顶部和底部具有单个间隔元素来表示屏幕外元素。

Vjeux 在这里做了一个小提琴，你可以看看：

http://jsfiddle.net/vjeux/KbWJ2/9/

滚动后执行

scrollState: function(scroll) {
    var visibleStart = Math.floor(scroll / this.state.recordHeight);
    var visibleEnd = Math.min(visibleStart + this.state.recordsPerBody, this.state.total - 1);

    var displayStart = Math.max(0, Math.floor(scroll / this.state.recordHeight) - this.state.recordsPerBody * 1.5);
    var displayEnd = Math.min(displayStart + 4 * this.state.recordsPerBody, this.state.total - 1);

    this.setState({
        visibleStart: visibleStart,
        visibleEnd: visibleEnd,
        displayStart: displayStart,
        displayEnd: displayEnd,
        scroll: scroll
    });
},

然后渲染功能将仅显示 displayStart..displayEnd 范围内的行。

您可能也对 ReactJS: Modeling Bi-Directional Infinite Scrolling 感兴趣。

次佳解决方案

查看我们的 React Infinite Libary：

https://github.com/seatgeek/react-infinite

更新 2016 年 12 月

我最近在很多项目中实际上都在使用 react-virtualized，发现它覆盖了大多数用例好多了。两个 Library 都很好，这取决于你正在寻找什么。例如，react-virtualized 支持通过 HOC 称为 CellMeasurer 的可变高度 JIT 测量，例如 https://bvaughn.github.io/react-virtualized/#/components/CellMeasurer 。

参考文献

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。