خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

نحوه پیاده سازی صفحه بندی در React با استفاده از React Hooks

ارشیا یوسفی ادیب ۸ مرداد, ۱۴۰۲ 5 min read

با ادغام سیستم صفحه بندی مبتنی بر صفحه در React، کارایی برنامه خود را افزایش دهید.

برنامه های کاربردی وب حجم زیادی از داده ها را مدیریت می کنند. به عنوان مثال، برنامه های کاربردی تجارت الکترونیک میلیاردها داده را به گونه ای نمایش می دهند که سازماندهی شده و از نظر بصری جذاب باشد. اساساً، داده ها باید به گونه ای ارائه شوند که درک و پیمایش برای کاربران آسان باشد.

با این حال، رندر کردن تمام داده ها در یک صفحه می تواند منجر به مشکلات عملکرد، زمان بارگذاری کندتر و تجربه کاربری ضعیف شود. به همین دلیل، اجرای منطق صفحه بندی می تواند این مشکلات را به میزان قابل توجهی کاهش دهد.

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

پیاده سازی صفحه بندی سمت مشتری

دو روش برای پیاده سازی صفحه بندی در برنامه ها وجود دارد: صفحه بندی سمت مشتری و صفحه بندی سمت سرور. با این وجود، صرف نظر از قالبی که انتخاب می کنید، مفهوم اساسی یکسان باقی می ماند. صفحه‌بندی سمت کلاینت شامل مدیریت منطق صفحه‌بندی در سمت مشتری، در مرورگر کاربر است.

نوت بوک را با صفحات خالی باز کنید

شما می توانید صفحه بندی سمت مشتری را با استفاده از تکنیک های مختلف پیاده سازی کنید. این تکنیک ها عبارتند از:

  1. صفحه بندی مبتنی بر صفحه: این روش شامل تقسیم داده ها به تکه ها یا صفحات با اندازه ثابت است که معمولاً تعداد معینی از موارد را در هر صفحه نمایش می دهد. کاربران می‌توانند با استفاده از پیوندها یا دکمه‌های ناوبری، که با شماره صفحه یا دکمه‌های قبلی و بعدی برچسب‌گذاری شده‌اند، در صفحات پیمایش کنند. این یک پیاده سازی محبوب با موتورهای جستجو و برنامه های کاربردی تجارت الکترونیک است.
  2. پیمایش بی‌نهایت: این روش شامل بارگیری پویا و ارائه داده‌های جدید در حین پیمایش کاربر به پایین صفحه است که یک تجربه مرور یکپارچه و مداوم را ایجاد می‌کند. این تکنیک به ویژه در هنگام برخورد با مجموعه داده های بزرگی که به طور مداوم در حال گسترش هستند، مانند فیدهای رسانه های اجتماعی، مفید است.

پیاده سازی صفحه بندی مبتنی بر صفحه با استفاده از React Hooks

برای شروع، یک پروژه React ایجاد کنید. می‌توانید از دستور create-react-app JavaScript برای راه‌اندازی یک برنامه اصلی React به صورت محلی استفاده کنید یا از Vite برای داربست پروژه React در دستگاه خود استفاده کنید.

این آموزش از Vite استفاده کرده است، شما می توانید کد این پروژه را در این مخزن GitHub بیابید.

پس از راه‌اندازی پروژه React، اجازه دهید با استفاده از React Hooks، صفحه‌بندی مبتنی بر صفحه را پیاده‌سازی کنیم.

پیکربندی مجموعه داده

در حالت ایده آل، شما معمولاً داده ها را از یک پایگاه داده واکشی و نمایش می دهید. با این حال، برای این آموزش، به جای آن، داده‌ها را از یک API ساختگی JSONPlaceholder دریافت خواهید کرد.

مطلب مرتبط:   نحوه ایجاد تایپوگرافی پاسخگو با CSS

در پوشه src، یک فایل کامپوننت/صفحه بندی جدید ایجاد کنید و کد زیر را اضافه کنید.

  1. یک کامپوننت تابعی React ایجاد کنید و حالات زیر را تعریف کنید. 
     import React, { useEffect, useState } from "react";
    import "./style.component.css";

    function Pagination() {
      const [data, setData] = useState([]);

      const [currentPage, setcurrentPage] = useState(1);
      const [itemsPerPage, setitemsPerPage] = useState(5);

      const [pageNumberLimit, setpageNumberLimit] = useState(5);
      const [maxPageNumberLimit, setmaxPageNumberLimit] = useState(5);
      const [minPageNumberLimit, setminPageNumberLimit] = useState(0);
      return (
        <>
        <h1> Pagination Component</h1> <br />
      
        </>
      );
    }

    export default Pagination;

     

    مؤلفه صفحه‌بندی

            );}صادر کردن صفحه‌بندی پیش‌فرض؛

  2. منطق واکشی داده ها از API ساختگی را پیاده سازی کنید. داخل کامپوننت Pagination، موارد زیر را اضافه کنید. 
      useEffect(() => {
        fetch("https://jsonplaceholder.typicode.com/todos")
          .then((response) => response.json())
          .then((json) => setData(json));
      }, []);

      const displayData = (data) => {
        return (
          <ul>
            {data.length > 0 &&
              data.map((todo, index) => {
                return <li key={index}>{todo.title}</li>;
              })}
          </ul>
        );
      };

    کد بالا دو هدف اصلی را دنبال می کند. ابتدا، هنگامی که مؤلفه نصب شد، قلاب useEffect برای واکشی داده‌ها از نقطه پایانی API خارجی فعال می‌شود که سپس به فرمت JSON تبدیل می‌شود. سپس داده‌های JSON به‌دست‌آمده برای به‌روزرسانی متغیر وضعیت داده با داده‌های واکشی شده برای کارهای انجام شده استفاده می‌شود. ثانیاً، تابع displayData داده‌های واکشی شده را به عنوان آرگومان می‌گیرد و داده‌ها را به‌عنوان یک لیست نامرتب از کارهای انجام می‌دهد.

  3. در بخش بازگشتی مؤلفه صفحه بندی، تابع displayData را برای نمایش داده های واکشی شده در مرورگر قرار دهید. در اینجا یک نسخه به‌روزرسانی شده از کد آمده است: بازگشت (  <>   

    مؤلفه صفحه‌بندی

        {displayData(data)}  ); با فراخوانی displayData(data) در عنصر JSX و ارسال متغیر وضعیت داده به عنوان یک پارامتر، تابع داده های واکشی شده را به عنوان یک لیست نامرتب در مرورگر نمایش می دهد.

import React, { useEffect, useState } from "react";
import "./style.component.css";

function Pagination() {
  const [data, setData] = useState([]);

  const [currentPage, setcurrentPage] = useState(1);
  const [itemsPerPage, setitemsPerPage] = useState(5);

  const [pageNumberLimit, setpageNumberLimit] = useState(5);
  const [maxPageNumberLimit, setmaxPageNumberLimit] = useState(5);
  const [minPageNumberLimit, setminPageNumberLimit] = useState(0);
  return (
    <>
    <h1> Pagination Component</h1> <br />
  
    </>
  );
}

export default Pagination;
 useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((response) => response.json())
      .then((json) => setData(json));
  }, []);

  const displayData = (data) => {
    return (
      <ul>
        {data.length > 0 &&
          data.map((todo, index) => {
            return <li key={index}>{todo.title}</li>;
          })}
      </ul>
    );
  };
return (
  <>
   <h1> Pagination Component</h1> <br />
    {displayData(data)}
  </>
);

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

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

این رویکرد به کاربران اجازه می‌دهد تا در داده‌ها به شیوه‌ای مدیریت‌پذیرتر و سازمان‌یافته‌تر حرکت کنند و عملکرد کلی و تجربه کاربری برنامه را بهبود بخشند.

پیاده سازی منطق صفحه بندی برای نمایش تعداد محدودی از آیتم ها در هر صفحه

برای تعیین اینکه کدام موارد باید در هر صفحه نمایش داده شوند، باید منطق لازم را پیاده سازی کنیم. با این حال، قبل از ادامه، تعیین تعداد کل صفحات مورد نیاز بر اساس موارد موجود ضروری است.

برای رسیدن به این هدف می توانید کد زیر را به کامپوننت Pagination اضافه کنید:

 const pages = [];
 for (let i = 1; i <= Math.ceil(data.length / itemsPerPage); i++) {
   pages.push(i);
 }

قطعه کد بالا، از طریق آرایه داده تکرار می شود و تعداد کل صفحات مورد نیاز را با تقسیم طول آرایه داده بر تعداد مورد نظر در هر صفحه محاسبه می کند—تعداد اولیه موارد در هر صفحه در حالت itemsPerPage به پنج تنظیم می شود. .

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

const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const pageItems = data.slice(indexOfFirstItem, indexOfLastItem);

این کد بر اساس متغیرهای currentPage و itemsPerPage، کارهایی را که باید در صفحه مرورگر ارائه شود، تعیین می‌کند – ایندکس‌های مربوط به مجموعه کارها را با استفاده از روش slice از آرایه داده استخراج می‌کند. سپس از ایندکس ها برای بازیابی وظایف خاصی که به صفحه مورد نظر تعلق دارند استفاده می شود.

اکنون برای نمایش کارهای انجام شده، تابع displayData را با قرار دادن pageItems به عنوان پارامتر به روز کنید. در اینجا یک نسخه به روز شده از کد است:

return (
  <>
   <h1> Pagination Component</h1> <br />
    {displayData(pageItems)}
  </>
);

با ایجاد این به‌روزرسانی، تابع displayData تعداد محدودی از موارد کار را به‌طور مناسب ارائه می‌کند و صفحه فعلی را منعکس می‌کند.

ساده کردن دسترسی به صفحه و ناوبری با دکمه های ناوبری

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

ابتدا، بیایید منطق دکمه های شماره صفحه را پیاده سازی کنیم. در کامپوننت Pagination، کد زیر را اضافه کنید.

  const handleClick = (event) => {
    setcurrentPage(Number(event.target.id));
  };

  const renderPageNumbers = pages.map((number) => {
    if (number < maxPageNumberLimit +1 && number > minPageNumberLimit) {
      return (
        <li
          key={number}
          id={number}
          onClick={handleClick}
          className={currentPage == number ? "active" : null}
        >
          {number}
        </li>
      );
    } else {
      return null;
    }
  });

عملکرد handleClick زمانی فعال می شود که کاربر روی دکمه شماره صفحه کلیک کند. این عمل سپس متغیر وضعیت فعلی صفحه را با شماره صفحه انتخاب شده به روز می کند.

متغیر renderPageNumbers از روش نقشه برای تکرار بر روی آرایه صفحات استفاده می کند و به صورت پویا آیتم های لیستی را که نشان دهنده هر صفحه هستند تولید می کند. این منطق شرطی را برای تعیین اینکه کدام شماره صفحه بر اساس حداکثر و حداقل محدودیت تعداد صفحات تعریف شده ارائه شود، اعمال می کند.

در نهایت کد دکمه های بعدی و قبلی را اضافه کنید.

  const handleNextbtn = () => {
    setcurrentPage(currentPage + 1);
    if (currentPage + 1 > maxPageNumberLimit) {
      setmaxPageNumberLimit(maxPageNumberLimit + pageNumberLimit);
      setminPageNumberLimit(minPageNumberLimit + pageNumberLimit);
    }
  };

  const handlePrevbtn = () => {
    setcurrentPage(currentPage - 1);
    if ((currentPage - 1) % pageNumberLimit == 0) {
      setmaxPageNumberLimit(maxPageNumberLimit - pageNumberLimit);
      setminPageNumberLimit(minPageNumberLimit - pageNumberLimit);
    }
  };

برای رندر کردن دکمه های ناوبری، عناصر JSX را به صورت زیر به روز کنید:

 return (
    <>
      <h1> Pagination Component</h1> <br />
      {displayData(pageItems)}
      <ul className="pageNumbers">
            <li>
            <button
                onClick={handlePrevbtn}
                disabled={currentPage == pages[0] ? true : false}
            > Previous
            </button>
            </li>
   
            {renderPageNumbers}

            <li>
            <button
                onClick={handleNextbtn}
                disabled={currentPage == pages[pages.length - 1] ? true : false}
            > Next
            </button>
            </li>
      </ul>
    </>
  );

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

انتخاب بین کتابخانه های صفحه بندی و سیستم های صفحه بندی سفارشی

وقتی صحبت از تصمیم گیری بین استفاده از کتابخانه های صفحه بندی یا ساخت یک سیستم صفحه بندی سفارشی می شود، انتخاب به عوامل مختلفی بستگی دارد. کتابخانه های صفحه بندی، مانند react-paginate، مؤلفه ها و عملکردهای از پیش ساخته شده را ارائه می دهند که امکان اجرای سریع و ساده را فراهم می کند.

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

Tags: