ReactJS infinite scroll built from scratch stops working after a bit -
i'm trying learn react implementing infinite scroll scratch.
algorithm:
arrarray of 1000 divsarr2array slice of 21 divsarr.arr2updated via scrolling.- only elements in
arr2supposed rendered - console shows current range of
arrbeing rendered
jquery included.
it works bit. stops after around 34 elements. why?
(snippet included. alternatively, here's jsbin: http://jsbin.com/yonabiv/edit?html,js,console,output )
var arr = []; (var = 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>
this because have reached end of parent's height, did because render 20 elements (each element 100px) , parent's height.
chain next set of elements rendered list (store in state , add more elements?).
did example illustrate difference, of course not perfect , may have bugs understand why stopped.
var arr = []; (var = 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>
Comments
Post a Comment