ゼロから構築されたReactJSの無限のスクロールは、少し後に動作を停止します。

ゼロから無限のスクロールを実装してReactを学習しようとしています。ゼロから構築されたReactJSの無限のスクロールは、少し後に動作を停止します。

アルゴリズム：

arr 1000件のdiv
arr2の配列では、arrから21のdiv要素の配列スライスです。 arr2はスクロールによって更新されます。
コンソールはarrの電流範囲が

のjQueryが含まれるをレンダリングされる示すarr2で

要素のみがレンダリングされるようになっています。

これは少しでも機能します。しかし、約34要素後に停止します。どうして？

（スニペットが含ままた、ここではJSBinです：http://jsbin.com/yonabiv/edit?html,js,console,output）

var arr = []; 
 

 
for (var i = 0; i<1000; i++) { 
 
    
 
    arr.push(i); 
 

 
} 
 

 

 
class Element extends React.Component{ 
 

 
    render() { 
 
     
 
     const styleObj = {height: 100, backgroundColor:"hotpink"}; 
 
    
 
     return (<div style={styleObj}> {this.props.data} </div>); 
 

 
    } 
 
} 
 

 

 
class List extends React.Component{ 
 

 
    constructor(props) { 
 
    super(props); 
 
    
 
    this.state = { 
 
     visibleStart: 0, 
 
     visibleEnd: 20 
 
    }; 
 
    
 
    } 
 

 
    render() { 
 

 
    var arr2 = arr.slice(this.state.visibleStart, this.state.visibleEnd); 
 
    var renderedOutput = arr2.map((item,index) => <Element data={item} key={index} />) 
 

 
    return (
 
     <div> 
 
     {renderedOutput} 
 
     </div> 
 
    ); 
 
    } 
 
    
 
componentDidMount() { 
 
    window.addEventListener('scroll', this.handleScroll.bind(this)) 
 
    } 
 

 
componentWillUnmount() { 
 
    window.removeEventListener('scroll', this.handleScroll.bind(this)) 
 
    } 
 

 
handleScroll(event) { 
 
    var visibleStart = Math.floor($(window).scrollTop()/100); 
 
    var visibleEnd = visibleStart + 20; 
 
    console.log(visibleStart + " " + visibleEnd); 
 
    this.setState({ 
 
     visibleStart: visibleStart, 
 
     visibleEnd: visibleEnd 
 
     }); 
 
    
 
    } 
 
    
 
} 
 

 

 
ReactDOM.render(<List />, document.getElementById("app"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>React Infinite Scroll</title> 
 
</head> 
 
<body> 
 

 
    <div id="app"></div> 
 
    
 
</body> 
 
</html>

出典

2017-08-20 thanks_in_advance

をこれは、あなたが親の高さの終わりに達しているので、あなたが唯一のレンダリングためということでしたです20要素（各要素は100px）で、これが親の高さです。
レンダリングされたリストに次の要素セットをチェーンすることができます（状態に格納し、要素を追加するだけです）。
私はこの違いを説明するために例を挙げましたが、もちろんこれは完璧ではないし、いくつかのバグがあるかもしれませんが、なぜそれが停止したのかを理解するだけです。

var arr = []; 
 

 
for (var i = 0; i<1000; i++) { 
 
    
 
    arr.push(i); 
 

 
} 
 

 

 
class Element extends React.Component{ 
 

 
    render() { 
 
     
 
     const styleObj = {height: 100, backgroundColor:"hotpink"}; 
 
    
 
     return (<div style={styleObj}> {this.props.data} </div>); 
 

 
    } 
 
} 
 

 

 
class List extends React.Component{ 
 

 
    constructor(props) { 
 
    super(props); 
 
    
 
    this.state = { 
 
     visibleStart: 0, 
 
     visibleEnd: 20, 
 
     listItems: arr.slice(0, 20) 
 
    }; 
 
    
 
    } 
 

 
    render() { 
 
    const {listItems} = this.state; 
 
    var renderedOutput = listItems.map((item,index) => <Element data={item} key={index} />) 
 
    return (
 
     <div> 
 
     {renderedOutput} 
 
     </div> 
 
    ); 
 
    } 
 
    
 
componentDidMount() { 
 
    window.addEventListener('scroll', this.handleScroll.bind(this)) 
 
    } 
 

 
componentWillUnmount() { 
 
    window.removeEventListener('scroll', this.handleScroll.bind(this)) 
 
    } 
 

 
handleScroll(event) { 
 
    var visibleStart = Math.floor($(window).scrollTop()/100); 
 
    var visibleEnd = visibleStart + 20; 
 
    var nextListItem = [...arr.slice(visibleStart, visibleEnd)]; 
 
    console.log(visibleStart + " " + visibleEnd); 
 
    this.setState({ 
 
     visibleStart: visibleStart, 
 
     visibleEnd: visibleEnd, 
 
     listItems: [...this.state.listItems, ...nextListItem] 
 
     }); 
 
    
 
    } 
 
    
 
} 
 

 

 
ReactDOM.render(<List />, document.getElementById("app"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>React Infinite Scroll</title> 
 
</head> 
 

 
<body> 
 

 
    <div id="app"></div> 
 

 
</body> 
 

 
</html>

出典

2017-08-20 20:36:42

ゼロから構築されたReactJSの無限のスクロールは、少し後に動作を停止します。

答えて

関連する問題