Nieskończone przewijanie dzięki React JS

Szukam sposobów implementacji nieskończonego przewijania w React. Natknąłem się na respons-infinite-scroll i stwierdziłem, że jest to nieefektywne, ponieważ po prostu dodaje węzły do ​​DOM i nie usuwa ich. Czy istnieje sprawdzone rozwiązanie z Reactem, które doda, usunie i utrzyma stałą liczbę węzłów w DOM?

Oto problem z jsfiddle . W tym problemie chcę mieć jednocześnie tylko 50 elementów w DOM. inne powinny być ładowane i usuwane, gdy użytkownik przewija w górę iw dół. Zaczęliśmy używać Reacta ze względu na jego algorytmy optymalizacyjne. Teraz nie mogłem znaleźć rozwiązania tego problemu. Natknąłem się na Airbnb Infinite JS . Ale jest zaimplementowany w Jquery. Aby skorzystać z tego nieskończonego zwoju airbnb, muszę stracić optymalizację React, której nie chcę robić.

przykładowy kod, który chcę dodać, to scroll (tutaj ładuję wszystkie elementy. Moim celem jest załadowanie tylko 50 elementów na raz)

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

Szukam pomocy ...

Zasadniczo podczas przewijania chcesz zdecydować, które elementy są widoczne, a następnie ponownie wyświetlić tylko te elementy, z pojedynczym elementem odstępnika na górze i na dole, aby reprezentować elementy poza ekranem.

Vjeux zrobił tutaj skrzypce, na które możesz spojrzeć: jsfiddle .

Po przewinięciu wykonuje

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
    });
},

a wtedy funkcja renderowania wyświetli tylko wiersze z zakresu displayStart..displayEnd.

Możesz być także zainteresowany ReactJS: Modeling Bi-Directional Infinite Scrolling .

Sprawdź naszą bibliotekę React Infinite:

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

Aktualizacja grudzień 2016

W rzeczywistości korzystałem ostatnio w wielu moich projektach z react-virtualized i stwierdziłem, że znacznie lepiej radzi sobie z większością przypadków użycia. Obie biblioteki są dobre, zależy to dokładnie od tego, czego szukasz. Na przykład reakcja-wirtualizacja obsługuje pomiary JIT o zmiennej wysokości za pośrednictwem HOC o nazwie CellMeasurer, na przykład tutaj https://bvaughn.github.io/react-virtualized/#/components/CellMeasurer .

Aktualizacja listopad 2018

Wiele lekcji z reaktywowanych wirtualizacji zostało przeniesionych do mniejszej, szybszej i bardziej wydajnej biblioteki okien reagowania tego samego autora.

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;