반응 JS를 사용한 무한 스크롤

반응 JS를 사용한 무한 스크롤

무한 스크롤을 리액션으로 구현하는 방법을 찾고 있다.나는 리액티브 무한 스크롤을 우연히 발견했고, 그것이 단지 DOM에 노드를 추가하고 제거하지 않기 때문에 비효율적이라는 것을 알았다.Ract와 함께 DOM의 노드 수를 일정하게 추가, 제거 및 유지하는 검증된 솔루션이 있는가?

여기 jsfiddle 문제가 있다.이 문제에서, 나는 한번에 50개의 요소만 가지고 싶다.다른 것들은 사용자가 위아래로 스크롤할 때 로드되고 제거되어야 한다.우리는 그것의 최적화 알고리즘 때문에 리액션을 사용하기 시작했다.이제 나는 이 문제에 대한 해결책을 찾을 수 없었다.나는 에어비앤비 무한 js를 우연히 만났다.그러나 그것은 Jquery와 함께 시행된다.이 에어비앤비 무한 스크롤을 사용하려면 하기 싫은 리액션 최적화를 해제해야 한다.

스크롤을 추가하고 싶은 샘플 코드는 다음과 같다(여기서 모든 항목을 로드하고 있다).한번에 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는 여기서 여러분이 볼 수 있는 "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.

반응에도 관심이 있을 수 있다.JS: 양방향 무한 스크롤 모델링.

무한 대응 라이브러리 확인:

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

2016년 12월 업데이트

최근 많은 프로젝트에서 실제로 리액티브 가상화를 사용하고 있으며, 대부분의 사용 사례를 훨씬 더 잘 다룬다는 것을 알게 되었다.두 도서관 모두 좋아, 정확히 무엇을 찾느냐에 따라 달라.예를 들어, 리액티브 가상화는 소위 HORK를 통한 가변 높이 JIT 측정을 지원한다.CellMeasurer, 예: https://bvaughn.github.io/react-virtualized/#/구성 요소/CellMeasureder.

2018년 11월 업데이트

리액션 가상화의 많은 교훈은 같은 저자의 리액션 윈도우 라이브러리에 전달되었다.

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;

참조URL: https://stackoverflow.com/questions/21238667/infinite-scrolling-with-react-js