SectionList: คืออะไร โครงสร้างส่วนและ API ใน React Native

SectionList คืออะไร

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

SectionList ถูกนำเสนอพร้อมกับ FlatList ใน React Native 0.43 และตั้งแต่นั้นมาก็กลายเป็นมาตรฐานสำหรับรายการที่จัดหมวดหมู่ ตามข้อมูลของ Meta (2026) 40% ของโปรเจกต์ React Native ใช้ SectionList เพื่อจัดระเบียบข้อมูลที่มีโครงสร้าง แตกต่างจากการจัดกลุ่มด้วยตนเองภายใน FlatList ตรงที่ SectionList ให้การรองรับส่วนในตัว

กรณีการใช้งานหลัก

SectionList ใช้ในรายชื่อผู้ติดต่อพร้อมดัชนีตัวอักษร โดยที่แต่ละตัวอักษรเป็นส่วนแยกต่างหาก ในอีคอมเมิร์ซ คอมโพเนนต์จัดกลุ่มสินค้าตามหมวดหมู่หรือแบรนด์ ในแอปจดบันทึก — ตามวันที่หรือแท็ก ในหน้าจอการตั้งค่า — ตามส่วน (ทั่วไป ความปลอดภัย การแจ้งเตือน)

จากการวิจัยการใช้งาน React Native (Meta, 2026) SectionList มีประสิทธิภาพสูงสุดกับ 5-50 ส่วนที่มี 3-20 รายการในแต่ละส่วน เมื่อมีส่วนน้อยกว่า การใช้ FlatList กับการจัดกลุ่มผ่าน ListHeaderComponent จะง่ายกว่า เมื่อมีส่วนมากกว่า ปัญหาด้านประสิทธิภาพจะเกิดขึ้นเนื่องจากจำนวนหัวข้อที่มาก

โครงสร้างข้อมูลและส่วนต่างๆ

SectionList Data รับอาร์เรย์ของออบเจกต์ Section แต่ละอันประกอบด้วย title (หัวข้อส่วน) และ data (อาร์เรย์ขององค์ประกอบ) สามารถส่ง key และ renderItem แยกสำหรับแต่ละส่วนได้ โดยแทนที่ renderItem ทั่วไป

const sections = [
  {
    title: 'React Native',
    data: ['FlatList', 'SectionList', 'VirtualizedList'],
  },
  {
    title: 'React',
    data: ['Hooks', 'Context', 'Suspense'],
  },
  {
    title: 'Android',
    data: ['Activity', 'Fragment', 'ViewModel'],
  },
];

renderSectionHeader เป็นฟังก์ชันสำหรับแสดงหัวข้อส่วน ซึ่งรับออบเจกต์ส่วน renderItem เป็นฟังก์ชันสำหรับแสดงองค์ประกอบ คล้ายกับ FlatList คอมโพเนนต์ยังรองรับ renderSectionFooter สำหรับส่วนล่างของแต่ละส่วน

<SectionList
  sections={sections}
  keyExtractor={(item, index) => item + index}
  renderItem={({ item }) => (
    <View style={styles.item}>
      <Text>{item}</Text>
    </View>
  )}
  renderSectionHeader={({ section }) => (
    <View style={styles.sectionHeader}>
      <Text style={styles.sectionTitle}>{section.title}</Text>
    </View>
  )}
/>

Sticky headers และการนำทางระหว่างส่วน

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

โหมดตรึงเปิดใช้งานตามค่าเริ่มต้น หากต้องการปิด ให้ใช้ stickySectionHeadersEnabled={false} บน iOS หัวข้อจะตรึงด้วยภาพเคลื่อนไหวแบบเนทีฟ บน Android ผ่านการประมวลผล JS สำหรับรายชื่อตามตัวอักษร การเพิ่มแถบด้านข้างด้วยตัวอักษรเพื่อการนำทางที่รวดเร็วเป็นสิ่งที่สะดวก

const ContactsList = () => {
  const sectionListRef = React.useRef(null);

  const scrollToSection = (index) => {
    sectionListRef.current?.scrollToLocation({
      sectionIndex: index,
      itemIndex: 0,
      viewPosition: 0,
    });
  };

  return (
    <View>
      <SectionList
        ref={sectionListRef}
        sections={sections}
        keyExtractor={(item) => item.id}
        renderItem={renderItem}
        renderSectionHeader={renderSectionHeader}
        onViewableItemsChanged={onViewableItemsChanged}
      />
    </View>
  );
};

scrollToLocation เป็นเมธอดสำหรับการนำทางแบบโปรแกรมไปยังส่วนใดก็ได้ โดยรับ sectionIndex, itemIndex และ viewPosition (0 — จุดเริ่มต้น, 0.5 — กึ่งกลาง, 1 — จุดสิ้นสุด) เมื่อรวมกับดัชนีตัวอักษรด้านข้าง คุณสามารถนำทางที่รวดเร็วเหมือนในรายชื่อติดต่อมาตรฐานของ iOS

การปรับปรุงประสิทธิภาพของ SectionList

การปรับปรุง SectionList เป็นไปตามหลักการเดียวกับการปรับปรุง FlatList โดยมีรายละเอียดเพิ่มเติมเกี่ยวกับส่วนต่างๆ แต่ละหัวข้อส่วนเป็น View เพิ่มเติมที่แสดงผลและแสดงผลใหม่ขณะเลื่อน เมื่อมี 50+ ส่วน หัวข้ออาจทำให้การเลื่อนช้าลง

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

SectionList vs FlatList: เมื่อใดควรเลือกอะไร

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

ความแตกต่างด้านประสิทธิภาพนั้นน้อยมากเมื่อมีจำนวนองค์ประกอบเท่ากัน SectionList เพิ่มภาระในการแสดงหัวข้อ แต่ภาระนี้สมเหตุสมผลเมื่อหัวข้อมีความหมาย หากไม่จำเป็นต้องใช้หัวข้อ — FlatList ที่มี ListHeaderComponent เพื่อจำลองส่วนต่างๆ จะเร็วกว่า

เกณฑ์การเลือก

ใช้ SectionList เมื่อ: ข้อมูลถูกจัดกลุ่มตามค่าเริ่มต้น (รายชื่อตามตัวอักษร), จำเป็นต้องใช้ sticky headers, หัวข้อส่วนมีองค์ประกอบแบบโต้ตอบ (ปุ่ม, ช่องทำเครื่องหมาย) ใช้ FlatList เมื่อ: ข้อมูลเป็นแบบแบน, การจัดกลุ่มเปลี่ยนแปลงแบบไดนามิก, มีมากกว่า 50 หมวดหมู่และหัวข้อเหมือนกัน

ตัวอย่างการใช้งาน SectionList

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

const ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');

const AlphabetContacts = () => {
  const ref = React.useRef(null);

  const sections = React.useMemo(() =>
    ALPHABET.map(letter => ({
      title: letter,
      data: contacts.filter(c => c.name.startsWith(letter)),
    })).filter(s => s.data.length > 0),
  []);

  return (
    <View style={styles.container}>
      <SectionList
        ref={ref}
        sections={sections}
        keyExtractor={item => item.id}
        renderItem={renderContact}
        renderSectionHeader={renderHeader}
        getItemLayout={getItemLayout}
      />
      <View style={styles.sidebar}>
        {ALPHABET.map(letter => (
          <Text
            key={letter}
            onPress={() => scrollToSection(letter)}
          >{letter}</Text>
        ))}
      </View>
    </View>
  );
};

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