Cuộn vô hạn với React JS

Tôi đang tìm cách triển khai tính năng cuộn vô hạn với React. Tôi đã xem qua react-vô hạn-scroll và thấy nó không hiệu quả vì nó chỉ thêm các nút vào DOM và không xóa chúng. Có giải pháp nào đã được chứng minh với React sẽ thêm, xóa và duy trì số lượng nút không đổi trong DOM.

Đây là vấn đề jsfiddle . Trong vấn đề này, tôi muốn chỉ có 50 phần tử trong DOM cùng một lúc. những người khác sẽ được tải và xóa khi người dùng cuộn lên và xuống. Chúng tôi đã bắt đầu sử dụng React vì các thuật toán tối ưu hóa của nó. Bây giờ tôi không thể tìm thấy giải pháp cho vấn đề này. Tôi đã xem qua airbnb js vô hạn . Nhưng nó được thực hiện với Jquery. Để sử dụng cuộn vô hạn airbnb này, tôi phải bỏ qua việc tối ưu hóa React mà tôi không muốn làm.

mã mẫu tôi muốn thêm cuộn là (ở đây tôi đang tải tất cả các mục. Mục tiêu của tôi là chỉ tải 50 mục cùng một lúc)

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

Tim sự giup đơ...

Về cơ bản khi cuộn, bạn muốn quyết định phần tử nào hiển thị và sau đó kết xuất để chỉ hiển thị các phần tử đó, với một phần tử đệm đơn ở trên và dưới để đại diện cho các phần tử ngoài màn hình.

Vjeux đã thực hiện một trò chơi ở đây mà bạn có thể xem: jsfiddle .

Khi cuộn, nó thực thi

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

và sau đó hàm kết xuất sẽ chỉ hiển thị các hàng trong phạm vi displayStart..displayEnd.

Bạn cũng có thể quan tâm đến ReactJS: Lập mô hình cuộn vô hạn theo hai hướng .

Kiểm tra Thư viện React Infinite của chúng tôi:

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

Cập nhật tháng 12 năm 2016

Tôi thực sự đã sử dụng phản ứng ảo hóa trong rất nhiều dự án của mình gần đây và thấy rằng nó bao gồm phần lớn các trường hợp sử dụng tốt hơn rất nhiều. Cả hai thư viện đều tốt, nó phụ thuộc vào chính xác những gì bạn đang tìm kiếm. Ví dụ: phản ứng ảo hóa hỗ trợ đo chiều cao thay đổi JIT thông qua HOC được gọi CellMeasurer, ví dụ ở đây https://bvaughn.github.io/react-virtualized/#/components/CellMeasurer .

Cập nhật tháng 11 năm 2018

Rất nhiều bài học từ phản ứng ảo hóa đã được chuyển sang thư viện cửa sổ phản ứng nhỏ hơn, nhanh hơn, hiệu quả hơn từ cùng một tác giả.

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;