問題描述

我正在尋找使用 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 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。