نحوه اضافه کردن اسکرول بی نهایت در React.js

از این تکنیک front-end برای ارائه یکنواخت و مداوم محتوا استفاده کنید.

آیا تا به حال به وب سایت یا برنامه ای برخورد کرده اید که در حین اسکرول کردن، محتوای بیشتری را بارگیری و نمایش دهد؟ این همان چیزی است که ما به آن طومار بی نهایت می گوییم.

اسکرول بی نهایت یک تکنیک محبوب است که می تواند مرور حجم زیادی از محتوا را آسان تر کند. همچنین می تواند تجربه کاربری روان تری را به خصوص در دستگاه های تلفن همراه ایجاد کند.

پیاده سازی Infinite Scroll در React.js

شما می توانید اسکرول بی نهایت را در React به چند روش مختلف پیاده سازی کنید. اولین مورد استفاده از کتابخانه ای مانند react-infinite-scroll-component است. هر زمان که کاربر به پایین صفحه پیمایش کند، مؤلفه این کتابخانه یک رویداد را راه‌اندازی می‌کند. سپس می توانید از این رویداد به عنوان نشانه ای برای بارگیری محتوای بیشتر استفاده کنید.

راه دیگر برای پیاده سازی اسکرول بی نهایت در React از طریق توابع داخلی آن است. یکی از این تابع ها “componentDidMount” است که React زمانی که برای اولین بار یک کامپوننت را نصب می کند، آن را فراخوانی می کند.

می توانید از این تابع برای بارگیری اولین دسته از داده ها و به دنبال آن تابع “componentDidUpdate” برای بارگیری داده های بعدی در حین اسکرول کردن کاربر به پایین استفاده کنید.

همچنین می توانید از قلاب های React برای اضافه کردن ویژگی اسکرول بی نهایت استفاده کنید.

با استفاده از کتابخانه react-infinite-scroll-component

چند راه برای استفاده از react-infinite-scroll-component وجود دارد.

react-infinite-scroll-component را نصب کنید

برای شروع استفاده، ابتدا باید آن را از طریق npm نصب کنید:

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

React-infinite-scroll-component را به 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 ایجاد می کند و آن را با یک آرایه آیتم های خالی و یک پرچم hasMore که روی True تنظیم شده است مقداردهی اولیه می کند.

تنظیم پارامترها

در روش چرخه حیات componentDidMount، باید متد fetchData را با پارامتر صفحه که روی 1 تنظیم شده است فراخوانی کنید. متد fetchData یک فراخوانی API برای واکشی داده برقرار می کند. این مثال React-Infinite-Scroller مقداری داده ساختگی تولید می کند و آرایه ای از 100 آیتم ایجاد می کند.

هنگامی که پارامتر صفحه به 100 رسید، چون آیتم دیگری وجود ندارد، می توانید پرچم hasMore را روی False تنظیم کنید. این کار مؤلفه InfiniteScroll را از برقراری تماس‌های API بیشتر باز می‌دارد. در نهایت، وضعیت را با استفاده از داده های جدید تنظیم کنید.

متد رندر از مولفه InfiniteScroll استفاده می کند و در برخی از props عبور می کند. پایه dataLength به طول آرایه آیتم ها تنظیم می شود. پروپ زیر روی متد fetchData تنظیم شده است. پایه hasMore برابر با پرچم hasMore تنظیم شده است.

پایه لودر باعث می شود که کامپوننت محتویات خود را به عنوان یک نشانگر بارگذاری نمایش دهد. به همین ترتیب، هنگامی که بارگیری تمام داده ها تمام شد، prop endMessage را به عنوان یک پیام نمایش می دهد.

می‌توانید سایر ابزارها را به مؤلفه InfiniteScroll منتقل کنید، اما اینها مواردی هستند که اغلب استفاده می‌کنید.

استفاده از توابع داخلی

React همچنین دارای چند روش داخلی است که می توانید از آنها برای پیاده سازی InfiniteScroll استفاده کنید.

روش اول componentDidUpdate است. React این روش را پس از به‌روزرسانی یک مؤلفه فراخوانی می‌کند. با استفاده از این روش می توانید بررسی کنید که آیا کاربر به پایین صفحه رفته است یا خیر. اگر بله، داده های بیشتری بارگیری می کند.

روش دوم اسکرول است که وقتی کاربر اسکرول می کند، React آن را فراخوانی می کند. می توانید از این روش برای پیگیری موقعیت اسکرول استفاده کنید. اگر کاربر به پایین صفحه رفته باشد، می توانید داده های بیشتری را بارگیری کنید.

در اینجا یک نمونه پیمایش بی نهایت 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 برای مدیریت حالت و عوارض جانبی استفاده می کند.

در قلاب useEffect، متد fetchData را با صفحه فعلی فراخوانی می کند. متد fetchData یک فراخوانی API برای واکشی داده ایجاد می کند. در این مثال، شما فقط چند داده ساختگی برای نشان دادن این تکنیک تولید می کنید.

حلقه for آرایه newItems را با 100 عدد صحیح پر می کند. اگر پارامتر صفحه 100 باشد، پرچم hasMore را روی False قرار می دهد. این کار مولفه اسکرول بی نهایت را از برقراری تماس های بیشتر API باز می دارد.

در نهایت، وضعیت را با داده های جدید تنظیم کنید.

روش onScroll موقعیت اسکرول را پیگیری می کند. اگر کاربر به پایین صفحه پیمایش کند، می‌توانید داده‌های بیشتری را بارگیری کنید.

قلاب useEffect یک شنونده رویداد برای رویداد اسکرول اضافه می کند. هنگامی که رویداد اسکرول فعال می شود، متد onScroll را فراخوانی می کند.

مزایا و معایب Infinite Scroll در React

استفاده از اسکرول بی نهایت React دارای مزایا و معایبی است. این رابط کاربری را بهبود می بخشد و تجربه روان تری را به خصوص در دستگاه های تلفن همراه ایجاد می کند. با این حال، ممکن است باعث شود کاربران محتوا را از دست بدهند، زیرا ممکن است به اندازه کافی به پایین پیمایش نکنند تا آن را ببینند.

ضروری است که مزایا و معایب تکنیک اسکرول بی نهایت را قبل از اجرای آن در وب سایت یا برنامه خود بسنجید.

بهبود تجربه کاربری با اسکرول بی نهایت در React.js

افزودن اسکرول بی نهایت به وب سایت یا برنامه React.js می تواند تجربه کاربر را بهبود بخشد. با اسکرول بی نهایت، کاربران مجبور نیستند برای دیدن محتوای بیشتر کلیک کنند. استفاده از Infinite Scroll در برنامه React.js می‌تواند تعداد بارگذاری‌های صفحه را کاهش دهد که عملکرد را بیشتر بهبود می‌بخشد.

همچنین می توانید به راحتی برنامه React خود را به صورت رایگان در صفحات Github مستقر کنید.

منبع مقاله