คุณเรนเดอร์ลิสต์ด้วย FlatList อย่างไร?

Question

Accepted Answer

**FlatList** คือคอมโพเนนต์ของ React Native สำหรับเรนเดอร์ **ลิสต์ที่เลื่อนได้** ของข้อมูลอย่างมีประสิทธิภาพ มันเรนเดอร์รายการ **แบบ lazy** (เฉพาะที่มองเห็น) ทำให้มีประสิทธิภาพสำหรับลิสต์ยาว ๆ — ดีกว่าการ map ข้อมูลใน ScrollView มาก ## FlatList — ลิสต์ที่มีประสิทธิภาพ ```jsx import { FlatList, Text, View } from 'react-native'; function UserList({ users }) { return ( item.id} // unique key per item (important!) renderItem={({ item }) => ( // how to render each item {item.name} )} /> ); } ``` FlatList รับอาร์เรย์ **data** ฟังก์ชัน **renderItem** (เรนเดอร์แต่ละรายการ) และ **keyExtractor** (คีย์เฉพาะ) — แล้วเรนเดอร์รายการอย่างมีประสิทธิภาพ ## ทำไมต้อง FlatList (ไม่ใช่ ScrollView + map) ```text ❌ ScrollView with data.map(...) → renders ALL items at once (even off-screen) → slow/memory-heavy for long lists ✅ FlatList → renders only VISIBLE items lazily (virtualization); recycles as you scroll → performant for long/large lists → Use FlatList for any non-trivial list; ScrollView only for small, fixed content. ``` ## ฟีเจอร์ที่มีประโยชน์ของ FlatList ```text ✓ onEndReached → load more data when scrolling near the end (INFINITE SCROLL / pagination) ✓ refreshing / onRefresh → PULL-TO-REFRESH ✓ ListHeaderComponent / ListFooterComponent / ItemSeparatorComponent ✓ numColumns → grid layout; horizontal → horizontal list ✓ SectionList → for sectioned/grouped lists ``` ## ทำไมจึงสำคัญ การเข้าใจ FlatList เป็นสิ่งจำเป็น เพราะ **การแสดงลิสต์ของข้อมูลเป็นความต้องการที่แทบเป็นสากล** ในแอป และ FlatList คือวิธีมาตรฐานที่มีประสิทธิภาพในการทำสิ่งนี้ใน React Native จึงเป็นความรู้ที่ต้องรู้ แทบทุกแอปแสดงลิสต์ (ฟีด, ข้อความ, ผลการค้นหา) และการทำสิ่งนี้อย่างมีประสิทธิภาพเป็นเรื่องสำคัญ ข้อสังเกตสำคัญคือ **FlatList เรนเดอร์รายการแบบ lazy** (เฉพาะที่มองเห็น ผ่าน virtualization รีไซเคิลขณะเลื่อน) — ทำให้มีประสิทธิภาพสำหรับลิสต์ยาว ๆ ต่างจากความผิดพลาดที่พบบ่อยอย่างการใช้ **ScrollView กับ `data.map()`** ซึ่งเรนเดอร์ทุกรายการพร้อมกัน (แม้นอกจอ) ทำให้ช้าและมีปัญหาหน่วยความจำสำหรับลิสต์ยาว ๆ การเข้าใจว่าควร **ใช้ FlatList สำหรับลิสต์ที่ไม่ธรรมดาทุกอัน** (และใช้ ScrollView เฉพาะกับเนื้อหาขนาดเล็กที่คงที่) เป็นความรู้เชิงปฏิบัติสำคัญที่ป้องกันปัญหาประสิทธิภาพจริง ๆ การเข้าใจการใช้งานพื้นฐาน (อาร์เรย์ `data`, ฟังก์ชัน `renderItem` และ `keyExtractor` สำหรับคีย์เฉพาะ) เป็นสิ่งจำเป็นในการเรนเดอร์ลิสต์ การเข้าใจ **ฟีเจอร์ที่มีประโยชน์** — `onEndReached` (สำหรับ infinite scroll/pagination โหลดข้อมูลเพิ่มเมื่อใกล้ปลาย — ความต้องการที่พบบ่อยมาก), pull-to-refresh, คอมโพเนนต์ header/footer/separator, เลย์เอาต์แบบ grid และแนวนอน และ SectionList สำหรับลิสต์แบบจัดกลุ่ม — ครอบคลุมความต้องการลิสต์ที่พบบ่อยของแอป เนื่องจากการแสดงลิสต์อย่างมีประสิทธิภาพเป็นความต้องการของแอปที่แทบเป็นสากล และ FlatList (ด้วยการเรนเดอร์แบบ lazy/virtualization) คือโซลูชันมาตรฐานที่มีประสิทธิภาพของ React Native — ดีกว่าแนวทาง ScrollView+map แบบง่าย ๆ มาก ดังนั้นการเข้าใจ FlatList จึงเป็นความรู้ React Native ที่จำเป็นและใช้บ่อย — คอมโพเนนต์หลักที่ใช้ในแทบทุกแอปเพื่อแสดงลิสต์ข้อมูล ซึ่งการเข้าใจการเรนเดอร์แบบ lazy ที่มีประสิทธิภาพและฟีเจอร์ของมัน (เช่น infinite scroll และ pull-to-refresh) เป็นพื้นฐานต่อการสร้างลิสต์ที่มีประสิทธิภาพและใช้งานได้ ซึ่งเป็นทักษะมาตรฐานสำหรับการพัฒนา React Native