用React JS无限滚动 [英] Infinite scrolling with React JS

问题描述

我正在研究如何使用React实现无限滚动。我遇到过 react-infinite-scroll ，发现它效率低下，因为它只是向DOM添加节点，不要删除它们。有没有经过验证的React解决方案，它会在DOM中添加，移除和维护不断数量的节点。

以下是 jsfiddle 的问题。
在这个问题中，我一次只想在DOM中只有50个元素。其他人应该在用户上下滚动时加载和删除。
我们已经开始使用React，因为它的优化算法。现在我找不到解决这个问题的方法。我遇到过 airbnb infinite js 。但它是用Jquery实现的。要使用这个airbnb无限滚动，我必须松开我不想做的React优化。

我想添加滚动的示例代码是（在这里我是加载所有项目我的目标是一次只加载50个项目）

$ p $ / ** @jsx React.DOM * /

var Hello = React.createClass（{
render：function（）{
return（< Hello> this.props.name}< / li>） ;
}
}）;
$ b $ var 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'））;


寻找帮助...

解决方案

基本上，当滚动时，您要决定哪些元素可见，然后重新渲染以仅显示那些元素，顶部和底部的单个spacer元素表示离屏元素。 b
$ b

Vjeux 在这里做了一个小提琴，你可以看看：

http://jsfiddle.net/vjeux/KbWJ2 / 9 /

滚动时执行

  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 。

您可能也对 ReactJS：Modeling Bi-Directional Infinite Scrolling 。

I am looking at ways to implement infinite scrolling with React. I have come across react-infinite-scroll 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.

Here is the jsfiddle 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 airbnb infinite js. 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.

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)

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

Looking for help...

解决方案

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.

Vjeux made a fiddle here which you can look at:

http://jsfiddle.net/vjeux/KbWJ2/9/

Upon scrolling it executes

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

and then the render function will display only the rows in the range displayStart..displayEnd.

You may also be interested in ReactJS: Modeling Bi-Directional Infinite Scrolling.

这篇关于用React JS无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！