blocks|key|4673165|text|基本上，当滚动时，您希望确定哪些元素是可见的，然后重新渲染以仅显示这些元素，并在顶部和底部使用单个间隔元素来表示屏幕外的元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4673166|Vjeux在这里做了一个小提琴，你可以看看：jsfiddle。|offset|length|4673167|滚动时，它将执行|4673168|scrollState:+function(scroll)+{
++++var+visibleStart+=+Math.floor(scroll+/+this.state.recordHeight);
++++var+visibleEnd+=+Math.min(visibleStart+%2B+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+%2B+4+*+this.state.recordsPerBody,+this.state.total+-+1);

++++this.setState({
++++++++visibleStart:+visibleStart,
++++++++visibleEnd:+visibleEnd,
++++++++displayStart:+displayStart,
++++++++displayEnd:+displayEnd,
++++++++scroll:+scroll
++++});
},|code-block|syntax|javascript|4673169|然后，render函数将只显示范围displayStart..displayEnd中的行。|style|CODE|4673170|您也可能对ReactJS:+Modeling+Bi-Directional+Infinite+Scrolling感兴趣。|4673171|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/vjeux|1|http://jsfiddle.net/vjeux/KbWJ2/9/|2|https://stackoverflow.com/questions/20870448/reactjs-modeling-bi-directional-infinite-scrolling^0|0|0|5|0|M|8|1|0|0|0|H|O|0|5|1F|2|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@$D|16|E|17|1|18]|$D|19|E|1A|1|1B]]|A|$]]|$1|F|3|G|5|6|7|1C|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1D|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1E|8|@$D|1F|E|1G|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1H|8|@]|9|@$D|1I|E|1J|1|1K]]|A|$]]|$1|S|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]|12|$5|V|W|X|A|$Y|13]]]]

<p>Basically when scrolling you want to decide which elements are visible and then rerender to display only those elements, with a single spacer element on top and bottom to represent the offscreen elements.</p>

<p><a href="https://github.com/vjeux" rel="nofollow noreferrer">Vjeux</a> made a fiddle here which you can look at: <a href="http://jsfiddle.net/vjeux/KbWJ2/9/" rel="nofollow noreferrer">jsfiddle</a>.</p>

<p>Upon scrolling it executes</p>

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

<p>and then the render function will display only the rows in the range <code>displayStart..displayEnd</code>.</p>

<p>You may also be interested in <a href="https://stackoverflow.com/questions/20870448/reactjs-modeling-bi-directional-infinite-scrolling">ReactJS: Modeling Bi-Directional Infinite Scrolling</a>.</p>


blocks|key|167287|text|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+'+%2B+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;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|167288|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>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) =&gt; {
                return response.json() })   
                    .then( (json) =&gt; {
                        var list = self.state.listData;                        
                        json.data.map(data =&gt; {
                            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 =&gt; console.log('err ' + error));

        }
    }

    componentDidMount() {
       this.fetchData();
    }

    render() {
    const loader = &lt;div className="loader"&gt;Loading ...&lt;/div&gt;;
    let JobItems; 
    if(this.state.listData){  
        JobItems = this.state.listData.map(Job =&gt; {
        return (
            &lt;tr&gt;
                &lt;td&gt;{Job.job_number}&lt;/td&gt;
                &lt;td&gt;{Job.title}&lt;/td&gt;
                &lt;td&gt;{Job.description}&lt;/td&gt;
                &lt;td&gt;{Job.status}&lt;/td&gt;
            &lt;/tr&gt;
        );
      });
    }
    return (
      &lt;div className="Jobs"&gt;
        &lt;div className="container"&gt;
            &lt;h2&gt;Jobs List&lt;/h2&gt;

            &lt;InfiniteScroll
                pageStart={0}
                loadMore={this.fetchData.bind(this)}
                hasMore={this.state.hasMoreItems}
                loader={loader}&gt;
                &lt;table className="table table-bordered"&gt;
                &lt;thead&gt;
                    &lt;tr&gt;
                        &lt;th&gt;Job Number&lt;/th&gt;
                        &lt;th&gt;Title&lt;/th&gt;
                        &lt;th&gt;Description&lt;/th&gt;
                        &lt;th&gt;Status&lt;/th&gt;
                    &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                {JobItems}
                &lt;/tbody&gt;
                &lt;/table&gt;
            &lt;/InfiniteScroll&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    );
  }

}

export default Jobs;
</code></pre>


<p>I am looking at ways to implement infinite scrolling with React. I have come across <a href="https://github.com/guillaumervls/react-infinite-scroll">react-infinite-scroll</a> and found it inefficient as it just adds nodes to the DOM and doesn't remove them. Is there any proven solution with React which will add, remove and maintains constant number of nodes in the DOM.</p>

<p>Here is the <a href="http://jsfiddle.net/rajeevprasanna/d24HR/41/">jsfiddle</a> problem.
In this problem, i want to have only 50 elements in the DOM at a time. others should be loaded and removed as user scrolls up and down.
    We have started using React because of it's optimization algorithms. Now i couldn't find solution to this problem. I have come across <a href="http://airbnb.github.io/infinity/">airbnb infinite js</a>. But it is implemented with Jquery. To use this airbnb infinite scroll, i have to loose the React optimisation which i don't want to do.</p>

<p>sample code i want to add scroll is(here i am loading all items. My goal is to load only 50 items at a time)</p>

<pre><code>/** @jsx React.DOM */

var Hello = React.createClass({
    render: function() {
        return (&lt;li&gt;Hello {this.props.name}&lt;/li&gt;);
    }
});

var HelloList = React.createClass({ 
     getInitialState: function() {                            
         var numbers =  [];
         for(var i=1;i&lt;10000;i++){
             numbers.push(i);
         }
         return {data:numbers};
     },

    render: function(){
       var response =  this.state.data.map(function(contact){          
          return (&lt;Hello name="World"&gt;&lt;/Hello&gt;);
        });

        return (&lt;ul&gt;{response}&lt;/ul&gt;)
    }
});

React.renderComponent(&lt;HelloList/&gt;, document.getElementById('content'));
</code></pre>

<p>Looking for help...</p>


Infinite scrolling with React JS

我正在寻找用React实现无限滚动的方法。我遇到过，发现它的效率很低，因为它只是向DOM添加节点，而不是删除它们。有没有经过验证的React解决方案，可以在DOM中添加、删除和维护固定数量的节点。这就是问题。在这个问题中，我希望在DOM中一次只有50个元素。当用户向上和向下滚动时，应加载和删除其他内容。我们已经开始使用...

问使用React JS无限滚动
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用React JS无限滚动EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用React JS无限滚动
EN