FixedSizeList: การเรนเดอร์รายการหลายพันรายการ
ตั้งค่า FixedSizeList ของ react-window สำหรับแถวที่มีความสูงเท่ากัน และเชื่อมต่อเข้ากับข้อมูลของคุณ
FixedSizeList: การเรนเดอร์รายการหลายพันรายการ เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน
การติดตั้ง react-window
คุณเพิ่ม react-window ลงในโปรเจกต์ด้วยตัวจัดการแพ็กเกจ เช่น ติดตั้งแพ็กเกจ react-window แพ็กเกจนี้มีขนาดเล็กและไม่มีการพึ่งพาที่มีขนาดใหญ่
เมื่อติดตั้งแล้ว คุณจะนำเข้าคอมโพเนนต์รายการที่ต้องใช้ โดยส่วนใหญ่มักเป็น FixedSizeList สำหรับแถวที่มีความสูงเท่ากันทั้งหมด
พร็อพที่ FixedSizeList ต้องมี
FixedSizeList ต้องใช้พร็อพหลายรายการจึงจะทำงานได้ ได้แก่ height และ width ที่กำหนดคอนเทนเนอร์สำหรับเลื่อน itemCount ที่ระบุจำนวนรายการทั้งหมด และ itemSize ที่ระบุความสูงของแต่ละแถวเป็นพิกเซล
พร็อพ children คือฟังก์ชันเรนเดอร์ที่วาดแถวเดียว ด้วยข้อมูลเหล่านี้ คอมโพเนนต์จึงทราบรูปทรงเรขาคณิตที่จำเป็นสำหรับการทำหน้าต่างเสมือนอย่างถูกต้อง
ฟังก์ชันเรนเดอร์แถว
ฟังก์ชันเรนเดอร์ children จะได้รับออบเจ็กต์ที่มี index และ style โดย index ระบุว่าต้องเรนเดอร์รายการใด ทำให้คุณค้นหาข้อมูลที่ถูกต้องได้ ส่วน style ใช้กำหนดตำแหน่งของแถวภายในรายการเสมือน
คุณคืนค่า JSX สำหรับแถวนั้น แล้ว react-window จะเรียกฟังก์ชันนี้เฉพาะกับแถวที่อยู่ในช่วงรายการที่มองเห็น
พร็อพ style ที่สำคัญ
พร็อพ style เป็นสิ่งจำเป็นและต้องนำไปใช้กับองค์ประกอบแถวของคุณ react-window จะจัดตำแหน่งแต่ละแถวแบบสัมบูรณ์ โดยใช้ top เพื่อวางแถวที่ออฟเซ็ตที่ถูกต้องภายในคอนเทนเนอร์สำหรับเลื่อนซึ่งมีความสูงมาก
หากไม่ใช้ style แถวทั้งหมดจะซ้อนกันอยู่ที่ตำแหน่งเดียวกัน และเวอร์ชวลไลเซชันจะยุบรวมกันจนแสดงผลผิดพลาด
การลืม style ทำให้ทุกอย่างพัง
ข้อผิดพลาดของ react-window ที่พบบ่อยที่สุดคือการไม่ใส่พร็อพ style ให้กับแถว รายการจะแสดงผลผิดพลาด โดยแถวต่าง ๆ ซ้อนทับกันด้านบนและการเลื่อนทำงานไม่ถูกต้อง
ควรกระจายหรือกำหนดค่า style ที่ได้รับให้กับองค์ประกอบชั้นนอกสุดของแถวเสมอ เพื่อให้การจัดตำแหน่งถูกต้อง
การส่งข้อมูลผ่าน itemData
แทนที่จะปิดครอบอาร์เรย์ไว้ภายในฟังก์ชันเรนเดอร์ คุณสามารถส่งอาร์เรย์ผ่านพร็อพ itemData ได้ จากนั้น react-window จะส่งต่ออาร์เรย์ไปยังแถวในฟิลด์ data พร้อมกับ index และ style
วิธีนี้ทำให้คอมโพเนนต์แถวแยกออกจากกันได้ดีขึ้น และช่วยในการทำเมโม เนื่องจากแถวได้รับข้อมูลอย่างชัดเจน
ทิศทางแนวนอน
FixedSizeList รองรับรายการแนวนอนผ่านพร็อพ layout ที่ตั้งค่าเป็น horizontal หรือใช้ตัวเลือก direction ทั้งนี้ขึ้นอยู่กับรุ่นที่ใช้งาน จากนั้น itemSize จะหมายถึงความกว้างแทนความสูง
เหมาะสำหรับแถบรายการเลื่อนแนวนอนหรือไทม์ไลน์ที่มีรายการจำนวนมาก
overscanCount
พร็อพ overscanCount จะเรนเดอร์แถวเพิ่มเติมอีกเล็กน้อยนอกช่วงที่มองเห็น พื้นที่สำรองนี้ช่วยลดโอกาสที่ผู้ใช้จะเห็นพื้นที่ว่างระหว่างการเลื่อนอย่างรวดเร็ว ก่อนที่แถวใหม่จะเมานต์
ค่า overscan ขนาดเล็กช่วยให้ประสบการณ์ลื่นไหล ส่วนค่าขนาดใหญ่จะทำให้ประโยชน์ของเวอร์ชวลไลเซชันลดลง เพราะเมานต์แถวนอกหน้าจอมากเกินไป
AutoSizer สำหรับคอนเทนเนอร์ที่ตอบสนองตามขนาด
FixedSizeList ต้องใช้ขนาดพิกเซลที่ระบุอย่างชัดเจน ซึ่งไม่สะดวกสำหรับเลย์เอาต์ที่ตอบสนองตามขนาดหน้าจอ คอมโพเนนต์ AutoSizer ที่ใช้ร่วมกันจะวัดขนาดของส่วนแม่ แล้วส่ง width และ height ให้รายการผ่านพร็อพสำหรับเรนเดอร์
การครอบรายการด้วย AutoSizer ทำให้รายการขยายเต็มคอนเทนเนอร์ที่ยืดหยุ่นได้โดยไม่ต้องกำหนดขนาดตายตัว และปรับตามการเปลี่ยนแปลงของเลย์เอาต์
การประกอบ FixedSizeList
FixedSizeList ที่ทำงานได้ต้องกำหนด height, width, itemCount และ itemSize และเรนเดอร์แถวผ่านฟังก์ชัน children ที่ใช้พร็อพ style หรืออาจให้ AutoSizer ป้อนขนาด และใช้ overscanCount เพิ่มพื้นที่สำรองก็ได้
เมื่อตั้งค่าเช่นนี้แล้ว รายการที่มีความยาวเท่าใดก็จะเมานต์เฉพาะแถวที่มองเห็นขณะเลื่อน และยังคงเลื่อนได้อย่างลื่นไหล
ตรวจสอบอย่างรวดเร็ว: พร็อพที่ FixedSizeList ต้องมี
โปรดทบทวนว่า FixedSizeList ต้องได้รับข้อมูลใดบ้างเพื่อเรนเดอร์แถวอย่างถูกต้อง
สรุป: FixedSizeList
FixedSizeList เรนเดอร์แถวที่มีความสูงเท่ากันโดยใช้ height, width, itemCount, itemSize และฟังก์ชันเรนเดอร์ children ที่ได้รับ index และ style การใช้พร็อพ style เป็นสิ่งบังคับ หากไม่ใช้ แถวจะซ้อนทับกัน
ส่งข้อมูลผ่าน itemData รองรับเลย์เอาต์แนวนอน เพิ่มพื้นที่สำรองขนาดเล็กด้วย overscanCount และใช้ AutoSizer เพื่อเติมคอนเทนเนอร์ที่ตอบสนองตามขนาด โดยไม่ต้องกำหนดขนาดตายตัว
คำถามที่พบบ่อย
บทเรียน “FixedSizeList: การเรนเดอร์รายการหลายพันรายการ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “FixedSizeList: การเรนเดอร์รายการหลายพันรายการ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “FixedSizeList: การเรนเดอร์รายการหลายพันรายการ”
ตั้งค่า FixedSizeList ของ react-window สำหรับแถวที่มีความสูงเท่ากัน และเชื่อมต่อเข้ากับข้อมูลของคุณ คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “FixedSizeList: การเรนเดอร์รายการหลายพันรายการ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม
ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ปัญหาการเรนเดอร์รายการขนาดใหญ่
- FixedSizeList: การเรนเดอร์รายการหลายพันรายการ
- VariableSizeList: ความสูงแถวแบบไดนามิก
- การผสานเวอร์ชวลไลเซชันกับการดึงข้อมูล