การผสานเวอร์ชวลไลเซชันกับการดึงข้อมูล

การเลื่อนแบบไม่สิ้นสุดจะโหลดข้อมูลเพิ่มเติมเมื่อผู้ใช้เข้าใกล้ท้ายรายการ แทนการแบ่งหน้าด้วยปุ่มหน้าอย่างชัดเจน เมื่อนำมารวมกับการทำเวอร์ชวลไลซ์แล้ว จะช่วยให้คุณเรียกดูชุดข้อมูลขนาดใหญ่ได้อย่างลื่นไหล

รายการจะแสดงเฉพาะแถวที่มองเห็น ขณะที่ข้อมูลใหม่ถูกดึงอยู่เบื้องหลัง ก่อนที่ผู้ใช้จะเลื่อนไปถึงด้านล่าง

คอมโพเนนต์รายการของ react-window ยอมรับฟังก์ชันเรียกกลับ onItemsRendered ซึ่งรายงานว่าขณะนี้มีการเรนเดอร์รายการที่ดัชนีใดบ้าง ฟังก์ชันนี้จะแจ้งดัชนีเริ่มต้นและสิ้นสุดของส่วนที่มองเห็น รวมถึงส่วนเผื่อการเรนเดอร์

ฟังก์ชันเรียกกลับนี้เป็นจุดเชื่อมต่อของคุณกับการเลื่อน ทำให้ตรวจจับได้ว่าผู้ใช้เลื่อนผ่านรายการไปไกลเพียงใด โดยไม่ต้องผูกเข้ากับเหตุการณ์การเลื่อนโดยตรง

หากต้องการทราบว่าเมื่อใดควรดึงข้อมูล ให้เปรียบเทียบ overscanStopIndex จาก onItemsRendered กับ itemCount ปัจจุบัน เมื่อช่วงที่เรนเดอร์เข้าใกล้ท้ายข้อมูลที่โหลดไว้ ก็ถึงเวลาต้องโหลดข้อมูลเพิ่มเติม

การใช้ดัชนีสิ้นสุดของส่วนเผื่อการเรนเดอร์จะช่วยให้มีเวลาเตรียมการเล็กน้อย โดยเริ่มดึงข้อมูลก่อนที่ผู้ใช้จะไปถึงแถวสุดท้ายจริง ๆ

เมื่อดัชนีสิ้นสุดข้ามขีดจำกัดที่กำหนด เช่น อยู่ห่างจาก itemCount ไม่เกินระยะหนึ่งหน้าจอ ให้เรียกฟังก์ชันดึงข้อมูลสำหรับหน้าถัดไป และต้องป้องกันไม่ให้เรียกคำขอที่ซ้อนทับกันหลายรายการ

แฟล็กแสดงสถานะกำลังโหลด หรือการตรวจสอบว่ามีการดึงข้อมูลที่กำลังดำเนินการอยู่แล้ว จะช่วยป้องกันคำขอซ้ำขณะที่ผู้ใช้เลื่อนผ่านบริเวณที่เป็นตัวกระตุ้น

เทคนิคที่เรียบง่ายคือกำหนด itemCount ให้เท่ากับจำนวนรายการที่โหลดแล้วบวกหนึ่งขณะที่ยังมีข้อมูลเพิ่มเติม แถวที่เพิ่มมาจะแสดงตัวหมุนแสดงการโหลด เพื่อสื่อว่ากำลังดึงข้อมูลอยู่

เมื่อข้อมูลใหม่มาถึง จำนวนรายการจะเพิ่มขึ้น และแถวตัวหมุนแสดงการโหลดจะถูกแทนที่ด้วยเนื้อหาจริง ทำให้ผู้ใช้ได้รับการตอบสนองทางภาพอย่างต่อเนื่อง

แพ็กเกจเสริม react-window-infinite-loader จะห่อหุ้มตรรกะนี้ไว้ให้คุณ คุณระบุ isItemLoaded, loadMoreItems และ itemCount แล้วแพ็กเกจจะเรียกตัวโหลดของคุณขณะที่ผู้ใช้เลื่อนไปใกล้แถวที่ยังไม่ได้โหลด

แพ็กเกจจะจัดการบันทึกว่าช่วงใดโหลดแล้ว และป้องกันการเรียกโหลดซ้ำโดยไม่จำเป็น ทำให้การสร้างการเลื่อนแบบไม่สิ้นสุดที่ทำงานได้อย่างน่าเชื่อถือเป็นเรื่องง่ายขึ้น

สำหรับดัชนีที่ยังไม่ได้โหลด คุณสามารถแสดงแถวตัวแทนหรือแถวโครงร่างแทนพื้นที่ว่างได้ ฟังก์ชันเรนเดอร์จะตรวจสอบว่ารายการที่ดัชนีนั้นโหลดแล้วหรือไม่ และจะแสดงโครงร่างหากยังไม่ได้โหลด

โครงร่างช่วยรักษาเค้าโครงและสื่อถึงความคืบหน้า จึงให้ความรู้สึกดีกว่าการปล่อยพื้นที่ว่างไว้ขณะที่หน้าถัดไปกำลังถูกโหลด

การดึงข้อมูลอาจล้มเหลวได้ ดังนั้นควรจัดการข้อผิดพลาดอย่างเหมาะสม คุณสามารถแสดงแถวข้อผิดพลาดพิเศษที่ท้ายรายการ พร้อมปุ่มลองใหม่ซึ่งเรียกฟังก์ชันโหลดอีกครั้งสำหรับช่วงที่ล้มเหลว

วิธีนี้ทำให้รายการยังใช้งานได้หลังเกิดปัญหาชั่วคราว และให้ผู้ใช้มีวิธีแก้ไขที่ชัดเจนโดยไม่ต้องโหลดทั้งหน้าใหม่

รูปแบบการแบ่งหน้าที่ใช้กับรายการแบบไม่สิ้นสุดมีอยู่สองแบบที่พบบ่อย การแบ่งหน้าแบบออฟเซ็ตจะขอข้อมูลตามหมายเลขหน้า หรือจำนวนรายการที่ข้ามไป ส่วนการแบ่งหน้าแบบเคอร์เซอร์จะขอรายการหลังเคอร์เซอร์ทึบที่ชี้ไปยังรายการล่าสุดที่เห็น

โดยทั่วไปการแบ่งหน้าแบบเคอร์เซอร์เชื่อถือได้มากกว่าสำหรับข้อมูลที่เปลี่ยนแปลงตลอดเวลา เพราะหลีกเลี่ยงการเลื่อนตำแหน่งและการซ้ำกันที่อาจเกิดขึ้นกับออฟเซ็ตเมื่อมีการแทรกรายการ

React Query useInfiniteQuery ทำงานร่วมกับการทำเวอร์ชวลไลซ์ได้อย่างเป็นธรรมชาติ โดยจัดการหน้าข้อมูลที่ดึงมา เคอร์เซอร์ถัดไป และสถานะกำลังโหลดกับข้อผิดพลาด ขณะที่ react-window เรนเดอร์หน้าข้อมูลที่รวมกันแล้วอย่างมีประสิทธิภาพ

คุณรวมหน้าเหล่านั้นเป็นอาร์เรย์เดียวสำหรับรายการ และเรียก fetchNextPage จากขีดจำกัดของ onItemsRendered จึงได้การแคชและการลองใหม่โดยไม่ต้องเขียนเพิ่ม

ระบุว่าเมื่อใดควรดึงข้อมูลเพิ่มเติมในรายการแบบไม่สิ้นสุดที่ทำเวอร์ชวลไลซ์

การเลื่อนแบบไม่สิ้นสุดจะโหลดหน้าใหม่เมื่อผู้ใช้เข้าใกล้ท้ายรายการ onItemsRendered รายงานดัชนี และการเปรียบเทียบ overscanStopIndex กับ itemCount จะบอกว่าควรดึงข้อมูลเมื่อใด โดยมีการป้องกันคำขอซ้ำ

ใช้แถวตัวแทนและแถวข้อผิดพลาด ใช้ react-window-infinite-loader เพื่อจัดการบันทึกสถานะ และใช้การแบ่งหน้าแบบเคอร์เซอร์สำหรับข้อมูลที่เปลี่ยนแปลงตลอดเวลา React Query useInfiniteQuery จะจัดการหน้า เคอร์เซอร์ และสถานะต่าง ๆ ควบคู่กับการเรนเดอร์ของ react-window