95

I am looking at ways to implement infinite scrolling with React. I have come across react-infinite-scroll and found it inefficient as it just adds nodes to the DOM and doesn't remove them. Is there any proven solution with React which will add, remove and maintains constant number of nodes in the DOM.

Here is the jsfiddle problem. In this problem, i want to have only 50 elements in the DOM at a time. others should be loaded and removed as user scrolls up and down. We have started using React because of it's optimization algorithms. Now i couldn't find solution to this problem. I have come across airbnb infinite js. But it is implemented with Jquery. To use this airbnb infinite scroll, i have to loose the React optimisation which i don't want to do.

sample code i want to add scroll is(here i am loading all items. My goal is to load only 50 items at a time)

/** @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'));

Looking for help...

4

3 回答 3

59

基本上，在滚动时，您想决定哪些元素是可见的，然后重新渲染以仅显示这些元素，顶部和底部有一个间隔元素来表示屏幕外元素。

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

滚动后执行

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感兴趣。

于 2014-01-20T17:51:02.777 回答
26

查看我们的 React 无限库：

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

2016 年 12 月更新

实际上，我最近在很多项目中都使用了react-virtualized ，发现它更好地覆盖了大多数用例。两个库都很好，这完全取决于您要查找的内容。例如，react-virtualized 通过名为 的 HOC 支持可变高度 JIT 测量CellMeasurer，例如https://bvaughn.github.io/react-virtualized/#/components/CellMeasurer。

2018 年 11 月更新

来自 react-virtualized 的许多课程已被移植到同一作者的更小、更快、更高效的 react-window库中。

于 2014-11-13T16:59:11.087 回答
1 
import React, { Component } from 'react';
import InfiniteScroll from 'react-infinite-scroller';


const api = {
    baseUrl: '/joblist'
};

class Jobs extends Component {
    constructor(props) {
            super(props);
            this.state = {
                listData: [],
                hasMoreItems: true,
                nextHref: null
        };
    }

    fetchData(){
            var self = this;           
            var url = api.baseUrl;
            if(this.state.nextHref) {
                url = this.state.nextHref;
            }

            fetch(url)
            .then( (response) => {
                return response.json() })   
                    .then( (json) => {
                        var list = self.state.listData;                        
                        json.data.map(data => {
                            list.push(data);
                        });

                        if(json.next_page_url != null) {
                            self.setState({
                                nextHref: resp.next_page_url,
                                listData: list                               
                            });
                        } else {
                            self.setState({
                                hasMoreItems: false
                            });
                        }
                    })
                    .catch(error => console.log('err ' + error));

        }
    }

    componentDidMount() {
       this.fetchData();
    }

    render() {
    const loader = <div className="loader">Loading ...</div>;
    let JobItems; 
    if(this.state.listData){  
        JobItems = this.state.listData.map(Job => {
        return (
            <tr>
                <td>{Job.job_number}</td>
                <td>{Job.title}</td>
                <td>{Job.description}</td>
                <td>{Job.status}</td>
            </tr>
        );
      });
    }
    return (
      <div className="Jobs">
        <div className="container">
            <h2>Jobs List</h2>

            <InfiniteScroll
                pageStart={0}
                loadMore={this.fetchData.bind(this)}
                hasMore={this.state.hasMoreItems}
                loader={loader}>
                <table className="table table-bordered">
                <thead>
                    <tr>
                        <th>Job Number</th>
                        <th>Title</th>
                        <th>Description</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                {JobItems}
                </tbody>
                </table>
            </InfiniteScroll>
        </div>
    </div>
    );
  }

}

export default Jobs;
于 2018-04-11T08:16:21.827 回答