VariableSizeList: ความสูงแถวแบบไดนามิก

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

สำหรับกรณีเหล่านี้ react-window มีประเภทรายการที่เปิดให้แต่ละรายการกำหนดขนาดของตนเองได้

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

ส่วนอื่น ๆ ทั้งฟังก์ชันเรนเดอร์ children และพร็อพ style ที่สำคัญยังคงเหมือนเดิม ดังนั้นการเปลี่ยนจึงมีเพียงเล็กน้อย

เมื่อใช้ VariableSizeList, itemSize จะเป็นฟังก์ชันที่รับ index และคืนค่าความสูงของแถวเป็นพิกเซล react-window เรียกใช้ฟังก์ชันนี้เพื่อคำนวณออฟเซ็ตและตัดสินใจเลือกช่วงรายการที่มองเห็น

วิธีนี้ทำให้คุณระบุความสูงที่ทราบอยู่แล้วได้ เช่น กำหนดแถวที่มีรูปภาพให้สูงกว่าแถวที่มีข้อความธรรมดา

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

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

VariableSizeList แคชออฟเซ็ตของรายการเพื่อประสิทธิภาพ เมื่อความสูงที่วัดได้เปลี่ยนแปลง คุณต้องเรียกเมธอด resetAfterIndex ของรายการผ่าน ref เพื่อให้รายการคำนวณตำแหน่งใหม่ตั้งแต่ index นั้นเป็นต้นไป

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

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

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

รูปแบบมาตรฐานคือเรนเดอร์แถวด้วยความสูงโดยประมาณ วัดความสูงจริงหลังการวาดโดยใช้ ref หรือ ResizeObserver เก็บค่าที่วัดได้ แล้วเรียก resetAfterIndex เพื่ออัปเดตตำแหน่ง

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

ฟังก์ชัน itemSize ควรคงที่ระหว่างการเรนเดอร์แต่ละครั้ง โดยทั่วไปจะห่อด้วย useCallback เพื่อไม่ให้รายการทำให้ออฟเซ็ตที่แคชไว้ใช้ไม่ได้อยู่ตลอดเวลา

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

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

สำหรับรายการที่แถวมีความสูงแตกต่างกันจริง ต้นทุนนี้คุ้มค่า แต่สำหรับแถวที่มีความสูงเท่ากัน FixedSizeList ยังคงเป็นตัวเลือกที่เร็วกว่าและเรียบง่ายกว่า

หากการวัดแบบไดนามิกอย่างแม่นยำมีต้นทุนสูงเกินไป บางครั้งคุณอาจใช้การประมาณค่าได้ การจัดกลุ่มแถวเป็นประเภทความสูงคงที่ไม่กี่แบบ หรือใช้ค่าเฉลี่ยที่เหมาะสม อาจทำให้คุณยังใช้ FixedSizeList ต่อไปได้

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

VariableSizeList รองรับแถวที่มีความสูงแตกต่างกันโดยรับ itemSize เป็นฟังก์ชันของดัชนี คุณสามารถคำนวณความสูงไว้ล่วงหน้าหรือวัดระหว่างทำงานได้ แต่ความสูงที่วัดจะต้องใช้วงจรประมาณค่า-เรนเดอร์-วัด-อัปเดต โดยมี resetAfterIndex

ทำให้ฟังก์ชัน itemSize คงที่ด้วย useCallback วิธีนี้มีต้นทุนสูงกว่า FixedSizeList ดังนั้นสำหรับแถวที่มีความสูงเท่ากัน หรือเมื่อการประมาณค่าเพียงพอแล้ว ให้เลือกตัวแปรแบบคงที่