วิธีเพิ่ม Infinite Scroll ใน React.js

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

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

การใช้ Infinite Scroll ใน React.js

มีหลายวิธีในการปรับใช้การเลื่อนแบบไม่มีที่สิ้นสุดในแอปพลิเคชัน React วิธีหนึ่งดังกล่าวเกี่ยวข้องกับการใช้ไลบรารีที่เรียกว่า react-infinite-scroll-component ส่วนประกอบของไลบรารีนี้จะตรวจสอบพฤติกรรมการเลื่อนของผู้ใช้และปล่อยเหตุการณ์เมื่อมาถึงจุดสิ้นสุดของหน้า ด้วยการใช้ประโยชน์จากกิจกรรมนี้ คุณสามารถเริ่มโหลดเนื้อหาเพิ่มเติมได้

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

คุณสามารถใช้ฟังก์ชันนี้เพื่อโหลดชุดข้อมูลเริ่มต้น และต่อมาใช้วิธี"componentDidUpdate"เพื่อดึงข้อมูลเพิ่มเติมเมื่อผู้ใช้เลื่อนหน้าลงไปอีก

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

การใช้ไลบรารีส่วนประกอบ react-infinite-scroll-component

สามารถใช้วิธีการได้หลายวิธีเมื่อใช้ React Infinite Scroll Component

ติดตั้ง react-infinite-scroll-component

เพื่อเริ่มต้นการใช้งาน ขั้นตอนเริ่มต้นเกี่ยวข้องกับการติดตั้งผ่าน Node Package Manager (npm)

 npm install react-infinite-scroll-component --save 

นำเข้าส่วนประกอบ react-infinite-scroll เข้าสู่ React

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

 import React from 'react'
import InfiniteScroll from 'react-infinite-scroll-component'
 
class App extends React.Component {
  constructor() {
    super()
    this.state = {
      items: [],
      hasMore: true
    }
  }

  componentDidMount() {
    this.fetchData(1)
  }
 
  fetchData = (page) => {
    const newItems = []
 
    for (let i = 0; i < 100; i\+\+) {
      newItems.push(i )
    }
 
    if (page === 100) {
      this.setState({ hasMore: false })
    }
 
    this.setState({ items: [...this.state.items, ...newItems] })
  }
 
  render() {
    return (
      <div>
        <h1>Infinite Scroll</h1>
        <InfiniteScroll
          dataLength={this.state.items.length}
          next={this.fetchData}
          hasMore={this.state.hasMore}
          loader={<h4>Loading...</h4>}
          endMessage={
            <p style={{ textAlign: 'center' }}>
              <b>Yay! You have seen it all</b>
            </p>
          }
        >
          {this.state.items.map((item, index) => (
            <div key={index}>
              {item}
            </div>
          ))}
        </InfiniteScroll>
      </div>
    )
  }
}
 
export default App

โค้ดนำเข้าทั้ง React และส่วนประกอบ InfiniteScroll จากไลบรารี react-infinite-scroll-component จากนั้นจึงสร้างส่วนประกอบ stateful ในภายหลัง สถานะเริ่มต้นของส่วนประกอบประกอบด้วยอาร์เรย์"items"ที่ว่างเปล่าและแฟล็ก"hasMore"ที่ถูกตั้งค่าเป็นจริง

ตั้งค่าพารามิเตอร์

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

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

เมธอด render ใช้ประโยชน์จากส่วนประกอบ InfiniteScroll โดยให้คุณสมบัติบางอย่างเป็นอาร์กิวเมนต์ โดยเฉพาะอย่างยิ่ง คุณสมบัติ dataLength ได้รับการกำหนดให้มีค่าเท่ากับความยาวของอาร์เรย์ items นอกจากนี้ ฟังก์ชัน fetchData ยังทำหน้าที่เป็นคุณสมบัติอื่นที่มีให้อีกด้วย สุดท้ายนี้ คุณสมบัติ hasMore จะถูกตั้งค่าให้เท่ากับค่าของแฟล็ก hasMore

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

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

การใช้ฟังก์ชันในตัว

React จัดเตรียมชุดฟังก์ชันการทำงานโดยธรรมชาติซึ่งช่วยให้สามารถใช้งาน InfiniteScroll ผ่านการใช้ประโยชน์จากวิธีการในตัว

วิธีการวงจรชีวิต componentDidUpdate ใน React ถูกเรียกใช้โดยเฟรมเวิร์กภายหลังการอัปเดตส่วนประกอบ แนวทางที่ขับเคลื่อนด้วยเหตุการณ์นี้ช่วยให้นักพัฒนาสามารถใช้ตรรกะที่กำหนดเองเพื่อตรวจจับเมื่อจำเป็นต้องดึงข้อมูลใหม่ตามตำแหน่งการเลื่อนของผู้ใช้ โดยพื้นฐานแล้ว วิธีการนี้ทำหน้าที่เป็นกลไกในการพิจารณาว่าเนื้อหาเพิ่มเติมควรโหลดต่ำกว่าเกณฑ์วิวพอร์ตปัจจุบันหรือไม่ เมื่อตรวจพบว่าผู้ใช้มาถึงจุดสิ้นสุดของส่วนที่มองเห็นได้ของเพจแล้ว

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

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

 import React, {useState, useEffect} from 'react'
 
function App() {
  const [items, setItems] = useState([])
  const [hasMore, setHasMore] = useState(true)
  const [page, setPage] = useState(1)
 
  useEffect(() => {
    fetchData(page)
  }, [page])
 
  const fetchData = (page) => {
    const newItems = []
 
    for (let i = 0; i < 100; i\+\+) {
      newItems.push(i)
    }
 
    if (page === 100) {
      setHasMore(false)
    }
 
    setItems([...items, ...newItems])
  }
 
  const onScroll = () => {
    const scrollTop = document.documentElement.scrollTop
    const scrollHeight = document.documentElement.scrollHeight
    const clientHeight = document.documentElement.clientHeight
 
    if (scrollTop \+ clientHeight >= scrollHeight) {
      setPage(page \+ 1)
    }
  }
 
  useEffect(() => {
    window.addEventListener('scroll', onScroll)
    return () => window.removeEventListener('scroll', onScroll)
  }, [items])
 
  return (
    <div>
      {items.map((item, index) => (
        <div key={index}>
          {item}
        </div>
      ))}
    </div>
  )
}
 
export default App 

โค้ดนี้ใช้งานทั้งตะขอ useState และ useEffect เพื่ออำนวยความสะดวกในการจัดการสถานะตลอดจนนำผลข้างเคียงที่ต้องการไปใช้ภายในแอปพลิเคชัน

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

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

สุดท้าย สร้างสถานะปัจจุบันตามข้อมูลที่อัปเดต

เมธอด onScroll จะรักษาบันทึกตำแหน่งการเลื่อนปัจจุบัน และเมื่อไปถึงด้านล่างสุดของหน้า เมธอดจะโหลดเนื้อหาหรือข้อมูลเพิ่มเติมแบบไดนามิก เพื่อตอบสนองต่อการโต้ตอบของผู้ใช้กับอินเทอร์เฟซเพิ่มเติม

การใช้ Hook useEffect ช่วยเพิ่มความสะดวกในการเพิ่ม Listener สำหรับเหตุการณ์การเลื่อน เพื่อตอบสนองต่อเหตุการณ์ดังกล่าว จึงมีการใช้เมธอดที่กำหนดเป็น onScroll

ข้อดีข้อเสียของ Infinite Scroll ใน React

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

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

ปรับปรุงประสบการณ์ผู้ใช้ด้วย Infinite Scroll ใน React.js

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

การปรับใช้แอปพลิเคชัน React บน GitHub Pages เป็นกระบวนการที่ไม่ซับซ้อนและไม่ต้องใช้เงินลงทุน