Défilement infini avec React JS

Je cherche des moyens d'implémenter le défilement infini avec React. J'ai rencontré react-infinite-scroll et je l'ai trouvé inefficace car il ajoute simplement des nœuds au DOM et ne les supprime pas. Existe-t-il une solution éprouvée avec React qui ajoutera, supprimera et maintiendra un nombre constant de nœuds dans le DOM.

Voici le problème de jsfiddle . Dans ce problème, je veux avoir seulement 50 éléments dans le DOM à la fois. d'autres doivent être chargés et supprimés lorsque l'utilisateur fait défiler vers le haut et vers le bas. Nous avons commencé à utiliser React en raison de ses algorithmes d'optimisation. Maintenant, je n'ai pas trouvé de solution à ce problème. Je suis tombé sur airbnb infinite js . Mais il est implémenté avec Jquery. Pour utiliser ce scroll infini airbnb, je dois perdre l'optimisation React, ce que je ne veux pas faire.

le code exemple que je veux ajouter est le scroll (ici, je charge tous les éléments. Mon objectif est de ne charger que 50 éléments à la fois)

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

Besoin d'aide ...

Fondamentalement, lors du défilement, vous voulez décider quels éléments sont visibles, puis effectuer un rendu pour n'afficher que ces éléments, avec un seul élément d'espacement en haut et en bas pour représenter les éléments hors écran.

Vjeux a fait ici un violon que vous pouvez regarder: jsfiddle .

Lors du défilement, il s'exécute

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

puis la fonction de rendu affichera uniquement les lignes de la plage displayStart..displayEnd.

Vous pouvez également être intéressé par ReactJS: Modélisation bi-directionnel infini Scrolling .

Consultez notre bibliothèque React Infinite:

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

Mise à jour décembre 2016

J'ai récemment utilisé react-virtualized dans beaucoup de mes projets et je trouve que cela couvre beaucoup mieux la majorité des cas d'utilisation. Les deux bibliothèques sont bonnes, cela dépend exactement de ce que vous recherchez. Par exemple, react-virtualized prend en charge la mesure JIT à hauteur variable via un HOC appelé CellMeasurer, exemple ici https://bvaughn.github.io/react-virtualized/#/components/CellMeasurer .

Mise à jour novembre 2018

Un grand nombre des leçons de react-virtualized ont été portées dans la bibliothèque react-window plus petite, plus rapide et plus efficace du même auteur.

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;