প্রতিক্রিয়া জেএস সহ অসীম স্ক্রোলিং

Question 1

আমি প্রতিক্রিয়া সহ অসীম স্ক্রোলিং বাস্তবায়নের উপায়গুলি দেখছি। আমি প্রতিক্রিয়া-অসীম-স্ক্রোলটি পেরিয়ে এসেছি এবং এটি অকার্যকর পেয়েছি কারণ এটি কেবল ডিওমে নোড যুক্ত করেছে এবং সেগুলি সরায় না। প্রতিক্রিয়া সহ এমন কোনও প্রমাণিত সমাধান রয়েছে যা ডিওমে নিয়মিত সংখ্যক নোড যুক্ত করবে, অপসারণ করবে এবং বজায় রাখবে।

এখানে jsfiddle সমস্যা। এই সমস্যায়, আমি একবারে DOM এ কেবল 50 টি উপাদান রাখতে চাই। অন্যদের উপরে এবং নীচে স্ক্রোল হিসাবে লোড এবং সরানো উচিত। আমরা এর অপ্টিমাইজেশন অ্যালগরিদমের কারণে প্রতিক্রিয়া ব্যবহার শুরু করেছি। এখন আমি এই সমস্যার সমাধান খুঁজে পাইনি। আমি airbnb অনন্ত js জুড়ে এসেছি । তবে এটি জ্যাকুরির সাথে প্রয়োগ করা হয়েছে। এই এয়ারবিএনবি অসীম স্ক্রোলটি ব্যবহার করতে, আমাকে প্রতিক্রিয়া অপ্টিমাইজেশনটি শিথিল করতে হবে যা আমি করতে চাই না।

আমি স্ক্রোলটি যুক্ত করতে চাইছি নমুনা কোডটি হ'ল (এখানে আমি সমস্ত আইটেম লোড করছি My আমার লক্ষ্যটি একবারে কেবল 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'));

সহায়তা খুঁজছি ...

Question 2

মূলত স্ক্রল করার সময় আপনি কোন উপাদানটি দৃশ্যমান তা স্থির করতে চান এবং তারপরে কেবল নীচে এবং নীচে একক স্পেসার উপাদান সহ অফস্ক্রিন উপাদান উপস্থাপন করতে কেবল সেই উপাদানগুলি প্রদর্শন করতে চান।

ভিজিউস এখানে একটি ঝাঁকুনি তৈরি করেছেন যা আপনি দেখতে পারেন: জেএসফিডাল ।

স্ক্রোলিংয়ের পরে এটি কার্যকর করে

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।

আপনি প্রতিক্রিয়া জেএসেও আগ্রহী হতে পারেন : দ্বি-দিকনির্দেশক অসীম স্ক্রোলিংয়ের মডেলিং ।

Question 3

আমাদের প্রতিক্রিয়া অসীম গ্রন্থাগারটি দেখুন:

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

ডিসেম্বর 2016 আপডেট

আমি সম্প্রতি আমার প্রচুর প্রকল্পগুলিতে রিঅ্যাক্ট-ভার্চুয়ালাইজড ব্যবহার করেছি এবং এটি দেখতে পেয়েছি যে এটি বেশিরভাগ ব্যবহারের ক্ষেত্রে আরও ভাল কেস করে। উভয় গ্রন্থাগার ভাল, এটি আপনি কী খুঁজছেন তার উপর নির্ভর করে। উদাহরণস্বরূপ, প্রতিক্রিয়া-ভার্চুয়ালাইজড একটি এইচওসি নামে পরিচিত পরিবর্তনশীল উচ্চতা জেআইটি পরিমাপের সমর্থন করে CellMeasurer, উদাহরণস্বরূপ এখানে https://bvaughn.github.io/react-virtualized/#/compferences/CellMeasurer ।

নভেম্বর 2018 আপডেট করুন

প্রতিক্রিয়া ভার্চুয়ালাইজড থেকে অনেক পাঠ একই লেখকের কাছ থেকে ছোট, দ্রুত, আরও দক্ষ রিঅ্যাক্ট উইন্ডো লাইব্রেরিতে পোর্ট করা হয়েছে ।

Question 4

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;