คำถามติดแท็ก infinite-scroll

แอปพลิเคชันของเราใช้การเลื่อนแบบไม่มีที่สิ้นสุดเพื่อนำทางรายการที่แตกต่างกันจำนวนมาก มีริ้วรอยเล็กน้อย: เป็นเรื่องปกติที่ผู้ใช้ของเราจะมีรายการ 10,000 รายการและต้องเลื่อนดู 3k + สิ่งเหล่านี้เป็นรายการที่สมบูรณ์ดังนั้นเราจึงมีเพียงไม่กี่ร้อยรายการใน DOM ก่อนที่ประสิทธิภาพของเบราว์เซอร์จะไม่เป็นที่ยอมรับ รายการมีความสูงแตกต่างกัน รายการอาจมีรูปภาพและเราอนุญาตให้ผู้ใช้ข้ามไปยังวันที่ที่ระบุ นี่เป็นเรื่องยุ่งยากเนื่องจากผู้ใช้สามารถข้ามไปยังจุดหนึ่งในรายการที่เราต้องโหลดภาพเหนือวิวพอร์ตซึ่งจะดันเนื้อหาลงเมื่อโหลด ไม่สามารถจัดการได้นั่นหมายความว่าผู้ใช้อาจข้ามไปยังวันที่ แต่จะถูกเลื่อนไปเป็นวันที่ก่อนหน้านี้ โซลูชันที่เป็นที่รู้จักและไม่สมบูรณ์: ( react-infinite-scroll ) - นี่เป็นเพียงคอมโพเนนต์ "โหลดมากขึ้นเมื่อเรากดด้านล่าง" มันไม่ได้คัดแยก DOM ใด ๆ ออกไปดังนั้นมันจะตายในหลายพันรายการ ( ตำแหน่งการเลื่อนด้วยปฏิกิริยา ) - แสดงวิธีการจัดเก็บและเรียกคืนตำแหน่งการเลื่อนเมื่อใส่ที่ด้านบนหรือแทรกที่ด้านล่าง แต่ไม่ใช่ทั้งสองอย่างพร้อมกัน ฉันไม่ได้มองหาโค้ดสำหรับโซลูชันที่สมบูรณ์ (แม้ว่าจะดีมากก็ตาม) แต่ฉันกำลังมองหา "วิธีตอบสนอง" เพื่อจำลองสถานการณ์นี้ สถานะตำแหน่งเลื่อนหรือไม่? ฉันควรติดตามสถานะใดเพื่อรักษาตำแหน่งของฉันไว้ในรายการ ฉันต้องเก็บสถานะอะไรเพื่อที่จะทริกเกอร์การเรนเดอร์ใหม่เมื่อฉันเลื่อนไปใกล้ด้านล่างหรือด้านบนของสิ่งที่แสดงผล

114 javascript  html  infinite-scroll  reactjs 

ฉันกำลังมองหาวิธีใช้การเลื่อนแบบไม่มีที่สิ้นสุดด้วย React ฉันเจอreact-infinite-scrollและพบว่ามันไม่มีประสิทธิภาพเพราะมันเพิ่มโหนดไปยัง DOM และไม่ได้ลบออก มีโซลูชันที่พิสูจน์แล้วด้วย React ซึ่งจะเพิ่มลบและรักษาจำนวนโหนดใน DOM ให้คงที่ นี่คือปัญหาjsfiddle ในปัญหานี้ฉันต้องการให้มีองค์ประกอบใน DOM ครั้งละ 50 รายการเท่านั้น อื่น ๆ ควรจะโหลดและลบออกเมื่อผู้ใช้เลื่อนขึ้นและลง เราได้เริ่มใช้ React เนื่องจากอัลกอริทึมการเพิ่มประสิทธิภาพ ตอนนี้ฉันไม่พบวิธีแก้ปัญหานี้ ฉันได้เจอAirbnb js แต่จะใช้กับ Jquery ในการใช้การเลื่อนแบบไม่มีที่สิ้นสุดของ airbnb ฉันต้องคลายการเพิ่มประสิทธิภาพการตอบสนองซึ่งฉันไม่ต้องการทำ รหัสตัวอย่างที่ฉันต้องการเพิ่มการเลื่อนคือ (ที่นี่ฉันกำลังโหลดรายการทั้งหมดเป้าหมายของฉันคือโหลดครั้งละ 50 รายการเท่านั้น) /** @jsx React.DOM */ var Hello = React.createClass({ render: function() { return (<li>Hello {this.props.name}</li>); } }); …

90 javascript  html  infinite-scroll  reactjs