এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

রিঅ্যাক্ট-উইন্ডো দিয়ে বড় তালিকা ভার্চুয়ালাইজ করুন
সেভ করা পৃষ্ঠা গুছিয়ে রাখতে 'সংগ্রহ' ব্যবহার করুন আপনার পছন্দ অনুযায়ী কন্টেন্ট সেভ করুন ও সঠিক বিভাগে রাখুন।

সুপার বড় টেবিল এবং তালিকাগুলি উল্লেখযোগ্যভাবে আপনার সাইটের কর্মক্ষমতা কমিয়ে দিতে পারে। ভার্চুয়ালাইজেশন সাহায্য করতে পারে!

Jason Miller

Houssein Djirdeh

react-window হল একটি লাইব্রেরি যা বড় তালিকাগুলিকে দক্ষতার সাথে রেন্ডার করার অনুমতি দেয়।

এখানে একটি তালিকার একটি উদাহরণ রয়েছে যেখানে 1000টি সারি রয়েছে react-window সাথে রেন্ডার করা হচ্ছে। যত দ্রুত সম্ভব স্ক্রোল করার চেষ্টা করুন।

কেন এই দরকারী?

এমন সময় থাকতে পারে যেখানে আপনাকে একটি বড় টেবিল বা তালিকা প্রদর্শন করতে হবে যাতে অনেকগুলি সারি রয়েছে। এই ধরনের একটি তালিকায় প্রতিটি আইটেম লোড করা কর্মক্ষমতা উল্লেখযোগ্যভাবে প্রভাবিত করতে পারে।

তালিকা ভার্চুয়ালাইজেশন বা "উইন্ডোয়িং" হল শুধুমাত্র ব্যবহারকারীর কাছে যা দৃশ্যমান তা রেন্ডার করার ধারণা। প্রথমে রেন্ডার করা উপাদানগুলির সংখ্যা সমগ্র তালিকার একটি খুব ছোট উপসেট এবং ব্যবহারকারী যখন স্ক্রল করতে থাকে তখন দৃশ্যমান সামগ্রীর "উইন্ডো" সরে যায় । এটি তালিকার রেন্ডারিং এবং স্ক্রলিং কার্যক্ষমতা উভয়ই উন্নত করে।

ভার্চুয়ালাইজড তালিকায় বিষয়বস্তুর উইন্ডো — একটি ভার্চুয়ালাইজড তালিকায় সামগ্রীর "উইন্ডো" সরানো হচ্ছে

"উইন্ডো" থেকে বেরিয়ে আসা DOM নোডগুলি পুনর্ব্যবহৃত হয়, অথবা ব্যবহারকারী তালিকার নিচে স্ক্রোল করার সাথে সাথে নতুন উপাদান দিয়ে প্রতিস্থাপিত হয়। এটি উইন্ডোর আকারের জন্য নির্দিষ্ট সমস্ত রেন্ডার করা উপাদানের সংখ্যা রাখে।

প্রতিক্রিয়া জানালা

react-window হল একটি ছোট, তৃতীয় পক্ষের লাইব্রেরি যা আপনার অ্যাপ্লিকেশনে ভার্চুয়ালাইজড তালিকা তৈরি করা সহজ করে তোলে। এটি বেশ কয়েকটি বেস API সরবরাহ করে যা বিভিন্ন ধরণের তালিকা এবং টেবিলের জন্য ব্যবহার করা যেতে পারে।

কখন নির্দিষ্ট আকারের তালিকা ব্যবহার করবেন

আপনার যদি সমান আকারের আইটেমগুলির একটি দীর্ঘ, এক-মাত্রিক তালিকা থাকে তবে FixedSizeList উপাদানটি ব্যবহার করুন।

import React from 'react';
import { FixedSizeList } from 'react-window';

const items = [...] // some list of items

const Row = ({ index, style }) => (
  <div style={style}>
     {/* define the row component using items[index] */}
  </div>
);

const ListComponent = () => (
  <FixedSizeList
    height={500}
    width={500}
    itemSize={120}
    itemCount={items.length}
  >
    {Row}
  </FixedSizeList>
);

export default ListComponent;

FixedSizeList উপাদান তালিকার মধ্যে আইটেমগুলির আকার নিয়ন্ত্রণ করতে একটি height , width এবং itemSize প্রপ গ্রহণ করে।
একটি ফাংশন যা সারিগুলিকে রেন্ডার করে একটি শিশু হিসাবে FixedSizeList এ পাস করা হয়। নির্দিষ্ট আইটেম সম্পর্কে বিশদ তথ্য index যুক্তি দিয়ে অ্যাক্সেস করা যেতে পারে ( items[index] )।
একটি style প্যারামিটারও সারি রেন্ডারিং পদ্ধতিতে পাস করা হয় যা অবশ্যই সারি উপাদানের সাথে সংযুক্ত থাকতে হবে। তালিকার আইটেমগুলি সম্পূর্ণরূপে তাদের উচ্চতা এবং প্রস্থের মানগুলির সাথে ইনলাইনে বরাদ্দ করা হয় এবং style পরামিতি এটির জন্য দায়ী৷

সতর্কতা: একটি বহিরাগত CSS ফাইল সহ তালিকা বা তালিকা আইটেম height এবং width বৈশিষ্ট্য নির্ধারণ করবেন না. এই শৈলী বৈশিষ্ট্যগুলি ইনলাইনে প্রয়োগ করা হয় এই কারণে তাদের উপেক্ষা করা হবে।

এই নিবন্ধে আগে দেখানো ত্রুটি উদাহরণ একটি FixedSizeList উপাদানের একটি উদাহরণ দেখায়।

পরিবর্তনশীল আকারের তালিকা কখন ব্যবহার করবেন

বিভিন্ন আকারের আইটেমগুলির একটি তালিকা রেন্ডার করতে VariableSizeList উপাদান ব্যবহার করুন। এই উপাদানটি একটি নির্দিষ্ট আকারের তালিকার মতো একইভাবে কাজ করে, তবে পরিবর্তে একটি নির্দিষ্ট মানের পরিবর্তে itemSize প্রপের জন্য একটি ফাংশন আশা করে।

import React from 'react';
import { VariableSizeList } from 'react-window';

const items = [...] // some list of items

const Row = ({ index, style }) => (
  <div style={style}>
     {/* define the row component using items[index] */}
  </div>
);

const getItemSize = index => {
  // return a size for items[index]
}

const ListComponent = () => (
  <VariableSizeList
    height={500}
    width={500}
    itemCount={items.length}
    itemSize={getItemSize}
  >
    {Row}
  </VariableSizeList>
);

export default ListComponent;

নিম্নলিখিত এম্বেড এই উপাদানটির একটি উদাহরণ দেখায়।

আইটেম সাইজ ফাংশনটি itemSize প্রপে পাস করা এই উদাহরণে সারি উচ্চতাকে এলোমেলো করে। তবে একটি বাস্তব প্রয়োগে, প্রতিটি আইটেমের মাপ সংজ্ঞায়িত করে প্রকৃত যুক্তি থাকা উচিত। আদর্শভাবে, এই মাপগুলি ডেটার উপর ভিত্তি করে গণনা করা উচিত বা একটি API থেকে প্রাপ্ত করা উচিত।

দ্রষ্টব্য: FixedSizeList এবং VariableSizeList উভয় উপাদানই একটি layout="horizontal" প্রপ ব্যবহার করে অনুভূমিক তালিকা সমর্থন করে। একটি উদাহরণ দেখতে ডকুমেন্টেশন দেখুন।

গ্রিড

react-window বহুমাত্রিক তালিকা বা গ্রিড ভার্চুয়ালাইজ করার জন্য সমর্থন প্রদান করে। এই প্রসঙ্গে, ব্যবহারকারী অনুভূমিকভাবে এবং উল্লম্বভাবে স্ক্রোল করার সাথে সাথে দৃশ্যমান সামগ্রীর "উইন্ডো" পরিবর্তিত হয়।

একইভাবে, নির্দিষ্ট তালিকা আইটেমগুলির আকার পরিবর্তিত হতে পারে কিনা তার উপর নির্ভর করে FixedSizeGrid এবং VariableSizeGrid উভয় উপাদানই ব্যবহার করা যেতে পারে।

FixedSizeGrid এর জন্য, API প্রায় একই কিন্তু উচ্চতা, প্রস্থ এবং আইটেম সংখ্যা উভয় কলাম এবং সারিগুলির জন্য উপস্থাপন করা প্রয়োজন।
VariableSizeGrid এর জন্য, কলামের প্রস্থ এবং সারি উচ্চতা উভয়ই তাদের নিজ নিজ প্রপসে মানের পরিবর্তে ফাংশন পাস করে পরিবর্তন করা যেতে পারে।

ভার্চুয়ালাইজড গ্রিডের উদাহরণ দেখতে ডকুমেন্টেশনটি দেখুন।

দ্রষ্টব্য: দক্ষ তালিকা এবং গ্রিড তৈরি করার জন্য বেস উপাদানগুলি সরবরাহ করার পাশাপাশি, react-window অন্যান্য ক্ষমতাও প্রদান করে যেমন একটি নির্দিষ্ট আইটেমে স্ক্রোল করা বা ব্যবহারকারী যখন স্ক্রলিং করে তখন একটি সূচক সরবরাহ করে। ডকুমেন্টেশন এই জন্য উদাহরণ প্রদান করে.

স্ক্রলে অলস লোড হচ্ছে

অনেক ওয়েবসাইট ব্যবহারকারীর স্ক্রোল ডাউন না হওয়া পর্যন্ত একটি দীর্ঘ তালিকায় আইটেম লোড এবং রেন্ডার করার জন্য অপেক্ষা করে কর্মক্ষমতা উন্নত করে। এই কৌশলটি, যা সাধারণত "অসীম লোডিং" হিসাবে পরিচিত, তালিকায় নতুন DOM নোড যোগ করে যখন ব্যবহারকারী একটি নির্দিষ্ট প্রান্তিক প্রান্তের কাছাকাছি স্ক্রোল করে। যদিও এটি একটি তালিকায় সমস্ত আইটেম একবারে লোড করার চেয়ে ভাল, এটি এখনও হাজার হাজার সারি এন্ট্রি সহ DOM-কে পপুলেট করে, যদি ব্যবহারকারী অনেকগুলি স্ক্রোল করে থাকে। এটি একটি অত্যধিক বড় DOM আকারের দিকে নিয়ে যেতে পারে, যা শৈলী গণনা এবং DOM মিউটেশন ধীর করে কার্যক্ষমতা প্রভাবিত করতে শুরু করে।

নিম্নলিখিত চিত্রটি এটিকে সংক্ষিপ্ত করতে সাহায্য করতে পারে:

একটি নিয়মিত এবং ভার্চুয়ালাইজড তালিকার মধ্যে স্ক্রল করার মধ্যে পার্থক্য

এই সমস্যাটি সমাধানের সর্বোত্তম পন্থা হল একটি পৃষ্ঠায় উপাদানগুলির একটি ছোট "উইন্ডো" বজায় রাখতে react-window মতো একটি লাইব্রেরি ব্যবহার করা, কিন্তু ব্যবহারকারীর স্ক্রোল করার সাথে সাথে নতুন এন্ট্রিগুলিকে অলসভাবে লোড করা। একটি পৃথক প্যাকেজ, react-window-infinite-loader , এটি react-window দিয়ে সম্ভব করে তোলে।

নিম্নলিখিত কোডটি বিবেচনা করুন যা একটি অভিভাবক App উপাদানে পরিচালিত রাষ্ট্রের উদাহরণ দেখায়।

import React, { Component } from 'react';

import ListComponent from './ListComponent';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [], // instantiate initial list here
      moreItemsLoading: false,
      hasNextPage: true
    };

    this.loadMore = this.loadMore.bind(this);
  }

  loadMore() {
   // method to fetch newer entries for the list
  }

  render() {
    const { items, moreItemsLoading, hasNextPage } = this.state;

    return (
      <ListComponent
        items={items}
        moreItemsLoading={moreItemsLoading}
        loadMore={this.loadMore}
        hasNextPage={hasNextPage}
      />
    );
  }
}

export default App;

একটি loadMore পদ্ধতি একটি চাইল্ড ListComponent কম্পোনেন্টে পাস করা হয় যাতে অসীম লোডার তালিকা থাকে। এটি গুরুত্বপূর্ণ কারণ ব্যবহারকারী একটি নির্দিষ্ট বিন্দু অতিক্রম করার পরে আরও আইটেম লোড করার জন্য অসীম লোডারকে একটি কলব্যাক ফায়ার করতে হবে।

তালিকাটি রেন্ডার করে এমন ListComponent দেখতে কেমন হতে পারে তা এখানে:

import React from 'react';
import { FixedSizeList } from 'react-window';
import InfiniteLoader from "react-window-infinite-loader";

const ListComponent = ({ items, moreItemsLoading, loadMore, hasNextPage }) => {
  const Row = ({ index, style }) => (
     {/* define the row component using items[index] */}
  );

  const itemCount = hasNextPage ? items.length + 1 : items.length;

  return (
    <InfiniteLoader
      isItemLoaded={index => index < items.length}
      itemCount={itemCount}
      loadMoreItems={loadMore}
    >
      {({ onItemsRendered, ref }) => (
        <FixedSizeList
          height={500}
          width={500}
          itemCount={itemCount}
          itemSize={120}
          onItemsRendered={onItemsRendered}
          ref={ref}
        >
          {Row}
        </FixedSizeList>
      )}
  </InfiniteLoader>
  )
};

export default ListComponent;

এখানে, FixedSizeList উপাদানটি InfiniteLoader মধ্যে মোড়ানো হয়। লোডারকে নির্ধারিত প্রপগুলি হল:

isItemLoaded : একটি নির্দিষ্ট আইটেম লোড হয়েছে কিনা তা পরীক্ষা করে এমন পদ্ধতি
itemCount : তালিকায় আইটেমের সংখ্যা (বা প্রত্যাশিত)
loadMoreItems : কলব্যাক যা একটি প্রতিশ্রুতি প্রদান করে যা তালিকার জন্য অতিরিক্ত ডেটার সমাধান করে

একটি রেন্ডার প্রপ একটি ফাংশন ফেরত দিতে ব্যবহৃত হয় যা তালিকা উপাদানটি রেন্ডার করার জন্য ব্যবহার করে। onItemsRendered এবং ref বৈশিষ্ট্য উভয়ই এমন বৈশিষ্ট্য যা পাস করতে হবে।

ভার্চুয়ালাইজড তালিকার সাথে কীভাবে অসীম লোডিং কাজ করতে পারে তার একটি উদাহরণ নিচে দেওয়া হল।

তালিকাটি নীচে স্ক্রোল করা একই রকম মনে হতে পারে, তবে প্রতিবার আপনি যখন তালিকার শেষের কাছাকাছি স্ক্রোল করবেন তখন একটি র্যান্ডম ব্যবহারকারী API থেকে 10 জন ব্যবহারকারীকে পুনরুদ্ধার করার জন্য একটি অনুরোধ করা হয়েছে। এক সময়ে ফলাফলের শুধুমাত্র একটি "উইন্ডো" রেন্ডার করার সময় এটি করা হয়।

একটি নির্দিষ্ট আইটেমের index পরীক্ষা করে, নতুন এন্ট্রির জন্য একটি অনুরোধ করা হয়েছে এবং আইটেমটি এখনও লোড হচ্ছে কিনা তার উপর নির্ভর করে একটি আইটেমের জন্য একটি ভিন্ন লোডিং অবস্থা দেখানো যেতে পারে।

যেমন:

const Row = ({ index, style }) => {
  const itemLoading = index === items.length;

  if (itemLoading) {
      // return loading state
  } else {
      // return item
  }
};

ওভারস্ক্যানিং

যেহেতু একটি ভার্চুয়ালাইজড তালিকার আইটেমগুলি শুধুমাত্র ব্যবহারকারীর স্ক্রোল করার সময় পরিবর্তিত হয়, নতুন এন্ট্রি প্রদর্শিত হওয়ার সাথে সাথে ফাঁকা স্থান সংক্ষিপ্তভাবে ফ্ল্যাশ করতে পারে। এটি লক্ষ্য করার জন্য আপনি এই নির্দেশিকায় আগের যেকোনো উদাহরণ দ্রুত স্ক্রোল করার চেষ্টা করতে পারেন।

ভার্চুয়ালাইজড তালিকার ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে, react-window আপনাকে overscanCount প্রপার্টি দিয়ে আইটেম ওভারস্ক্যান করতে দেয়। এটি আপনাকে দৃশ্যমান "উইন্ডো" এর বাইরে কতগুলি আইটেম সর্বদা রেন্ডার করতে হবে তা নির্ধারণ করতে দেয়৷

<FixedSizeList
  //...
  overscanCount={4}
>
  {...}
</FixedSizeList>

overscanCount FixedSizeList এবং VariableSizeList উভয় উপাদানের জন্য কাজ করে এবং একটি ডিফল্ট মান 1। একটি তালিকা কত বড় এবং প্রতিটি আইটেমের আকারের উপর নির্ভর করে, শুধুমাত্র একটি এন্ট্রি ওভারস্ক্যান করলে ব্যবহারকারী স্ক্রোল করার সময় ফাঁকা স্থানের লক্ষণীয় ফ্ল্যাশ রোধ করতে সাহায্য করতে পারে। যাইহোক, অত্যধিক এন্ট্রি ওভারস্ক্যান করা নেতিবাচকভাবে কর্মক্ষমতা প্রভাবিত করতে পারে। একটি ভার্চুয়ালাইজড তালিকা ব্যবহার করার সম্পূর্ণ বিষয় হল ব্যবহারকারী যে কোনো মুহূর্তে যা দেখতে পারে তার এন্ট্রির সংখ্যা কমিয়ে আনা, তাই ওভারস্ক্যান করা আইটেমের সংখ্যা যতটা সম্ভব কম রাখার চেষ্টা করুন।

FixedSizeGrid এবং VariableSizeGrid এর জন্য, ওভারস্ক্যান করার জন্য যথাক্রমে কলাম এবং সারির সংখ্যা নিয়ন্ত্রণ করতে overscanColumnsCount এবং overscanRowsCount বৈশিষ্ট্যগুলি ব্যবহার করুন।

উপসংহার

আপনার অ্যাপ্লিকেশনে তালিকা এবং টেবিল ভার্চুয়ালাইজ করা শুরু করার বিষয়ে আপনি যদি নিশ্চিত না হন তবে এই পদক্ষেপগুলি অনুসরণ করুন:

রেন্ডারিং এবং স্ক্রলিং কর্মক্ষমতা পরিমাপ. এই নিবন্ধটি দেখায় যে কীভাবে Chrome DevTools-এ FPS মিটার ব্যবহার করে একটি তালিকায় আইটেমগুলি কতটা দক্ষতার সাথে রেন্ডার করা হয় তা অন্বেষণ করতে ব্যবহার করা যেতে পারে।
পারফরম্যান্সকে প্রভাবিত করে এমন কোনো দীর্ঘ তালিকা বা গ্রিডের জন্য react-window অন্তর্ভুক্ত করুন।
react-window কিছু বৈশিষ্ট্য সমর্থিত না থাকলে, আপনি যদি নিজে এই কার্যকারিতা যোগ করতে না পারেন তাহলে react-virtualized ব্যবহার করার কথা বিবেচনা করুন।
আপনার ভার্চুয়ালাইজ করা তালিকাটি react-window-infinite-loader দিয়ে মুড়ে দিন যদি আপনি ব্যবহারকারীর স্ক্রোল করার সময় আইটেমগুলি অলসভাবে লোড করতে চান।
আপনার তালিকার জন্য overscanCount প্রপার্টি ব্যবহার করুন এবং আপনার গ্রিডের জন্য overscanColumnsCount এবং overscanRowsCount প্রপার্টি ব্যবহার করুন যাতে খালি কন্টেন্ট ফ্ল্যাশ না হয়। খুব বেশি এন্ট্রি ওভারস্ক্যান করবেন না কারণ এটি কর্মক্ষমতাকে নেতিবাচকভাবে প্রভাবিত করবে।

Jason Miller

Houssein Djirdeh

কেন এই দরকারী?

প্রতিক্রিয়া জানালা

কখন নির্দিষ্ট আকারের তালিকা ব্যবহার করবেন

import React from 'react';
import { FixedSizeList } from 'react-window';

const items = [...] // some list of items

const Row = ({ index, style }) => (
  <div style={style}>
     {/* define the row component using items[index] */}
  </div>
);

const ListComponent = () => (
  <FixedSizeList
    height={500}
    width={500}
    itemSize={120}
    itemCount={items.length}
  >
    {Row}
  </FixedSizeList>
);

export default ListComponent;

FixedSizeList উপাদান তালিকার মধ্যে আইটেমগুলির আকার নিয়ন্ত্রণ করতে একটি height , width এবং itemSize প্রপ গ্রহণ করে।
একটি ফাংশন যা সারিগুলিকে রেন্ডার করে একটি শিশু হিসাবে FixedSizeList এ পাস করা হয়। নির্দিষ্ট আইটেম সম্পর্কে বিশদ তথ্য index যুক্তি দিয়ে অ্যাক্সেস করা যেতে পারে ( items[index] )।
একটি style প্যারামিটারও সারি রেন্ডারিং পদ্ধতিতে পাস করা হয় যা অবশ্যই সারি উপাদানের সাথে সংযুক্ত থাকতে হবে। তালিকার আইটেমগুলি সম্পূর্ণরূপে তাদের উচ্চতা এবং প্রস্থের মানগুলির সাথে ইনলাইনে বরাদ্দ করা হয় এবং style পরামিতি এটির জন্য দায়ী৷

পরিবর্তনশীল আকারের তালিকা কখন ব্যবহার করবেন

import React from 'react';
import { VariableSizeList } from 'react-window';

const items = [...] // some list of items

const Row = ({ index, style }) => (
  <div style={style}>
     {/* define the row component using items[index] */}
  </div>
);

const getItemSize = index => {
  // return a size for items[index]
}

const ListComponent = () => (
  <VariableSizeList
    height={500}
    width={500}
    itemCount={items.length}
    itemSize={getItemSize}
  >
    {Row}
  </VariableSizeList>
);

export default ListComponent;

নিম্নলিখিত এম্বেড এই উপাদানটির একটি উদাহরণ দেখায়।

গ্রিড

FixedSizeGrid এর জন্য, API প্রায় একই কিন্তু উচ্চতা, প্রস্থ এবং আইটেম সংখ্যা উভয় কলাম এবং সারিগুলির জন্য উপস্থাপন করা প্রয়োজন।
VariableSizeGrid এর জন্য, কলামের প্রস্থ এবং সারি উচ্চতা উভয়ই তাদের নিজ নিজ প্রপসে মানের পরিবর্তে ফাংশন পাস করে পরিবর্তন করা যেতে পারে।

ভার্চুয়ালাইজড গ্রিডের উদাহরণ দেখতে ডকুমেন্টেশনটি দেখুন।

স্ক্রলে অলস লোড হচ্ছে

নিম্নলিখিত চিত্রটি এটিকে সংক্ষিপ্ত করতে সাহায্য করতে পারে:

import React, { Component } from 'react';

import ListComponent from './ListComponent';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [], // instantiate initial list here
      moreItemsLoading: false,
      hasNextPage: true
    };

    this.loadMore = this.loadMore.bind(this);
  }

  loadMore() {
   // method to fetch newer entries for the list
  }

  render() {
    const { items, moreItemsLoading, hasNextPage } = this.state;

    return (
      <ListComponent
        items={items}
        moreItemsLoading={moreItemsLoading}
        loadMore={this.loadMore}
        hasNextPage={hasNextPage}
      />
    );
  }
}

export default App;

তালিকাটি রেন্ডার করে এমন ListComponent দেখতে কেমন হতে পারে তা এখানে:

import React from 'react';
import { FixedSizeList } from 'react-window';
import InfiniteLoader from "react-window-infinite-loader";

const ListComponent = ({ items, moreItemsLoading, loadMore, hasNextPage }) => {
  const Row = ({ index, style }) => (
     {/* define the row component using items[index] */}
  );

  const itemCount = hasNextPage ? items.length + 1 : items.length;

  return (
    <InfiniteLoader
      isItemLoaded={index => index < items.length}
      itemCount={itemCount}
      loadMoreItems={loadMore}
    >
      {({ onItemsRendered, ref }) => (
        <FixedSizeList
          height={500}
          width={500}
          itemCount={itemCount}
          itemSize={120}
          onItemsRendered={onItemsRendered}
          ref={ref}
        >
          {Row}
        </FixedSizeList>
      )}
  </InfiniteLoader>
  )
};

export default ListComponent;

isItemLoaded : একটি নির্দিষ্ট আইটেম লোড হয়েছে কিনা তা পরীক্ষা করে এমন পদ্ধতি
itemCount : তালিকায় আইটেমের সংখ্যা (বা প্রত্যাশিত)
loadMoreItems : কলব্যাক যা একটি প্রতিশ্রুতি প্রদান করে যা তালিকার জন্য অতিরিক্ত ডেটার সমাধান করে

যেমন:

const Row = ({ index, style }) => {
  const itemLoading = index === items.length;

  if (itemLoading) {
      // return loading state
  } else {
      // return item
  }
};

ওভারস্ক্যানিং

<FixedSizeList
  //...
  overscanCount={4}
>
  {...}
</FixedSizeList>

উপসংহার

আপনার অ্যাপ্লিকেশনে তালিকা এবং টেবিল ভার্চুয়ালাইজ করা শুরু করার বিষয়ে আপনি যদি অনিশ্চিত হন তবে এই পদক্ষেপগুলি অনুসরণ করুন:

রেন্ডারিং এবং স্ক্রলিং কর্মক্ষমতা পরিমাপ. এই নিবন্ধটি দেখায় যে কীভাবে Chrome DevTools-এ FPS মিটার ব্যবহার করে একটি তালিকায় আইটেমগুলি কতটা দক্ষতার সাথে রেন্ডার করা হয় তা অন্বেষণ করতে ব্যবহার করা যেতে পারে।
পারফরম্যান্সকে প্রভাবিত করে এমন কোনো দীর্ঘ তালিকা বা গ্রিডের জন্য react-window অন্তর্ভুক্ত করুন।
react-window কিছু বৈশিষ্ট্য সমর্থিত না থাকলে, আপনি যদি নিজে এই কার্যকারিতা যোগ করতে না পারেন তাহলে react-virtualized ব্যবহার করার কথা বিবেচনা করুন।
আপনার ভার্চুয়ালাইজ করা তালিকাটি react-window-infinite-loader দিয়ে মুড়ে দিন যদি আপনি ব্যবহারকারীর স্ক্রোল করার সময় আইটেমগুলি অলসভাবে লোড করতে চান।
আপনার তালিকার জন্য overscanCount প্রপার্টি ব্যবহার করুন এবং আপনার গ্রিডের জন্য overscanColumnsCount এবং overscanRowsCount প্রপার্টি ব্যবহার করুন যাতে খালি কন্টেন্ট ফ্ল্যাশ না হয়। খুব বেশি এন্ট্রি ওভারস্ক্যান করবেন না কারণ এটি কর্মক্ষমতাকে নেতিবাচকভাবে প্রভাবিত করবে।

Jason Miller

Houssein Djirdeh

কেন এই দরকারী?

প্রতিক্রিয়া জানালা

কখন নির্দিষ্ট আকারের তালিকা ব্যবহার করবেন

import React from 'react';
import { FixedSizeList } from 'react-window';

const items = [...] // some list of items

const Row = ({ index, style }) => (
  <div style={style}>
     {/* define the row component using items[index] */}
  </div>
);

const ListComponent = () => (
  <FixedSizeList
    height={500}
    width={500}
    itemSize={120}
    itemCount={items.length}
  >
    {Row}
  </FixedSizeList>
);

export default ListComponent;

FixedSizeList উপাদান তালিকার মধ্যে আইটেমগুলির আকার নিয়ন্ত্রণ করতে একটি height , width এবং itemSize প্রপ গ্রহণ করে।
একটি ফাংশন যা সারিগুলিকে রেন্ডার করে একটি শিশু হিসাবে FixedSizeList এ পাস করা হয়। নির্দিষ্ট আইটেম সম্পর্কে বিশদ তথ্য index যুক্তি দিয়ে অ্যাক্সেস করা যেতে পারে ( items[index] )।
একটি style প্যারামিটারও সারি রেন্ডারিং পদ্ধতিতে পাস করা হয় যা অবশ্যই সারি উপাদানের সাথে সংযুক্ত থাকতে হবে। তালিকার আইটেমগুলি সম্পূর্ণরূপে তাদের উচ্চতা এবং প্রস্থের মানগুলির সাথে ইনলাইনে বরাদ্দ করা হয় এবং style পরামিতি এটির জন্য দায়ী৷

পরিবর্তনশীল আকারের তালিকা কখন ব্যবহার করবেন

import React from 'react';
import { VariableSizeList } from 'react-window';

const items = [...] // some list of items

const Row = ({ index, style }) => (
  <div style={style}>
     {/* define the row component using items[index] */}
  </div>
);

const getItemSize = index => {
  // return a size for items[index]
}

const ListComponent = () => (
  <VariableSizeList
    height={500}
    width={500}
    itemCount={items.length}
    itemSize={getItemSize}
  >
    {Row}
  </VariableSizeList>
);

export default ListComponent;

নিম্নলিখিত এম্বেড এই উপাদানটির একটি উদাহরণ দেখায়।

গ্রিড

FixedSizeGrid এর জন্য, API প্রায় একই কিন্তু উচ্চতা, প্রস্থ এবং আইটেম সংখ্যা উভয় কলাম এবং সারিগুলির জন্য উপস্থাপন করা প্রয়োজন।
VariableSizeGrid এর জন্য, কলামের প্রস্থ এবং সারি উচ্চতা উভয়ই তাদের নিজ নিজ প্রপসে মানের পরিবর্তে ফাংশন পাস করে পরিবর্তন করা যেতে পারে।

ভার্চুয়ালাইজড গ্রিডের উদাহরণ দেখতে ডকুমেন্টেশনটি দেখুন।

স্ক্রলে অলস লোড হচ্ছে

নিম্নলিখিত চিত্রটি এটিকে সংক্ষিপ্ত করতে সাহায্য করতে পারে:

import React, { Component } from 'react';

import ListComponent from './ListComponent';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [], // instantiate initial list here
      moreItemsLoading: false,
      hasNextPage: true
    };

    this.loadMore = this.loadMore.bind(this);
  }

  loadMore() {
   // method to fetch newer entries for the list
  }

  render() {
    const { items, moreItemsLoading, hasNextPage } = this.state;

    return (
      <ListComponent
        items={items}
        moreItemsLoading={moreItemsLoading}
        loadMore={this.loadMore}
        hasNextPage={hasNextPage}
      />
    );
  }
}

export default App;

তালিকাটি রেন্ডার করে এমন ListComponent দেখতে কেমন হতে পারে তা এখানে:

import React from 'react';
import { FixedSizeList } from 'react-window';
import InfiniteLoader from "react-window-infinite-loader";

const ListComponent = ({ items, moreItemsLoading, loadMore, hasNextPage }) => {
  const Row = ({ index, style }) => (
     {/* define the row component using items[index] */}
  );

  const itemCount = hasNextPage ? items.length + 1 : items.length;

  return (
    <InfiniteLoader
      isItemLoaded={index => index < items.length}
      itemCount={itemCount}
      loadMoreItems={loadMore}
    >
      {({ onItemsRendered, ref }) => (
        <FixedSizeList
          height={500}
          width={500}
          itemCount={itemCount}
          itemSize={120}
          onItemsRendered={onItemsRendered}
          ref={ref}
        >
          {Row}
        </FixedSizeList>
      )}
  </InfiniteLoader>
  )
};

export default ListComponent;

isItemLoaded : একটি নির্দিষ্ট আইটেম লোড হয়েছে কিনা তা পরীক্ষা করে এমন পদ্ধতি
itemCount : তালিকায় আইটেমের সংখ্যা (বা প্রত্যাশিত)
loadMoreItems : কলব্যাক যা একটি প্রতিশ্রুতি প্রদান করে যা তালিকার জন্য অতিরিক্ত ডেটার সমাধান করে

যেমন:

const Row = ({ index, style }) => {
  const itemLoading = index === items.length;

  if (itemLoading) {
      // return loading state
  } else {
      // return item
  }
};

ওভারস্ক্যানিং

<FixedSizeList
  //...
  overscanCount={4}
>
  {...}
</FixedSizeList>

উপসংহার

রেন্ডারিং এবং স্ক্রলিং কর্মক্ষমতা পরিমাপ. এই নিবন্ধটি দেখায় যে কীভাবে Chrome DevTools-এ FPS মিটার ব্যবহার করে একটি তালিকায় আইটেমগুলি কতটা দক্ষতার সাথে রেন্ডার করা হয় তা অন্বেষণ করতে ব্যবহার করা যেতে পারে।
পারফরম্যান্সকে প্রভাবিত করে এমন কোনো দীর্ঘ তালিকা বা গ্রিডের জন্য react-window অন্তর্ভুক্ত করুন।
react-window কিছু বৈশিষ্ট্য সমর্থিত না থাকলে, আপনি যদি নিজে এই কার্যকারিতা যোগ করতে না পারেন তাহলে react-virtualized ব্যবহার করার কথা বিবেচনা করুন।
আপনার ভার্চুয়ালাইজ করা তালিকাটি react-window-infinite-loader দিয়ে মুড়ে দিন যদি আপনি ব্যবহারকারীর স্ক্রোল করার সময় আইটেমগুলি অলসভাবে লোড করতে চান।
আপনার তালিকার জন্য overscanCount প্রপার্টি ব্যবহার করুন এবং আপনার গ্রিডের জন্য overscanColumnsCount এবং overscanRowsCount প্রপার্টি ব্যবহার করুন যাতে খালি কন্টেন্ট ফ্ল্যাশ না হয়। খুব বেশি এন্ট্রি ওভারস্ক্যান করবেন না কারণ এটি কর্মক্ষমতাকে নেতিবাচকভাবে প্রভাবিত করবে।

Jason Miller

Houssein Djirdeh

কেন এই দরকারী?

প্রতিক্রিয়া জানালা

কখন নির্দিষ্ট আকারের তালিকা ব্যবহার করবেন

import React from 'react';
import { FixedSizeList } from 'react-window';

const items = [...] // some list of items

const Row = ({ index, style }) => (
  <div style={style}>
     {/* define the row component using items[index] */}
  </div>
);

const ListComponent = () => (
  <FixedSizeList
    height={500}
    width={500}
    itemSize={120}
    itemCount={items.length}
  >
    {Row}
  </FixedSizeList>
);

export default ListComponent;

FixedSizeList উপাদান তালিকার মধ্যে আইটেমগুলির আকার নিয়ন্ত্রণ করতে একটি height , width এবং itemSize প্রপ গ্রহণ করে।
একটি ফাংশন যা সারিগুলিকে রেন্ডার করে একটি শিশু হিসাবে FixedSizeList এ পাস করা হয়। নির্দিষ্ট আইটেম সম্পর্কে বিশদ তথ্য index যুক্তি দিয়ে অ্যাক্সেস করা যেতে পারে ( items[index] )।
একটি style প্যারামিটারও সারি রেন্ডারিং পদ্ধতিতে পাস করা হয় যা অবশ্যই সারি উপাদানের সাথে সংযুক্ত থাকতে হবে। তালিকার আইটেমগুলি সম্পূর্ণরূপে তাদের উচ্চতা এবং প্রস্থের মানগুলির সাথে ইনলাইনে বরাদ্দ করা হয় এবং style পরামিতি এটির জন্য দায়ী৷

পরিবর্তনশীল আকারের তালিকা কখন ব্যবহার করবেন

import React from 'react';
import { VariableSizeList } from 'react-window';

const items = [...] // some list of items

const Row = ({ index, style }) => (
  <div style={style}>
     {/* define the row component using items[index] */}
  </div>
);

const getItemSize = index => {
  // return a size for items[index]
}

const ListComponent = () => (
  <VariableSizeList
    height={500}
    width={500}
    itemCount={items.length}
    itemSize={getItemSize}
  >
    {Row}
  </VariableSizeList>
);

export default ListComponent;

নিম্নলিখিত এম্বেড এই উপাদানটির একটি উদাহরণ দেখায়।

গ্রিড

FixedSizeGrid এর জন্য, API প্রায় একই কিন্তু উচ্চতা, প্রস্থ এবং আইটেম সংখ্যা উভয় কলাম এবং সারিগুলির জন্য উপস্থাপন করা প্রয়োজন।
VariableSizeGrid এর জন্য, কলামের প্রস্থ এবং সারি উচ্চতা উভয়ই তাদের নিজ নিজ প্রপসে মানের পরিবর্তে ফাংশন পাস করে পরিবর্তন করা যেতে পারে।

ভার্চুয়ালাইজড গ্রিডের উদাহরণ দেখতে ডকুমেন্টেশনটি দেখুন।

স্ক্রলে অলস লোড হচ্ছে

অনেক ওয়েবসাইট ব্যবহারকারীর স্ক্রোল ডাউন না হওয়া পর্যন্ত একটি দীর্ঘ তালিকায় আইটেম লোড এবং রেন্ডার করার জন্য অপেক্ষা করে কর্মক্ষমতা উন্নত করে। এই কৌশলটি, যা সাধারণত "অসীম লোডিং" হিসাবে পরিচিত, তালিকায় নতুন DOM নোড যোগ করে যখন ব্যবহারকারী একটি নির্দিষ্ট প্রান্তিক প্রান্তের কাছাকাছি স্ক্রোল করে। যদিও এটি একটি তালিকায় সমস্ত আইটেম একবারে লোড করার চেয়ে ভাল, এটি এখনও হাজার হাজার সারি এন্ট্রি সহ DOM-কে পপুলেট করে, যদি ব্যবহারকারী অনেকগুলি স্ক্রোল করে থাকে। এটি অত্যধিক বড় ডিওএম আকারের দিকে নিয়ে যেতে পারে, যা স্টাইলের গণনা এবং ডিওএম মিউটেশনগুলি ধীর করে দিয়ে পারফরম্যান্সকে প্রভাবিত করতে শুরু করে।

নিম্নলিখিত চিত্রটি এটির সংক্ষিপ্তসার করতে সহায়তা করতে পারে:

একটি নিয়মিত এবং ভার্চুয়ালাইজড তালিকার মধ্যে স্ক্রোলিংয়ের পার্থক্য

এই সমস্যাটি সমাধানের জন্য সর্বোত্তম পদ্ধতির হ'ল কোনও পৃষ্ঠায় উপাদানগুলির একটি ছোট "উইন্ডো" বজায় রাখতে react-window মতো একটি লাইব্রেরি ব্যবহার করা অবিরত, তবে ব্যবহারকারীকে স্ক্রোল করার সাথে সাথে আরও নতুন এন্ট্রিগুলি অলস লোড করা। একটি পৃথক প্যাকেজ, react-window-infinite-loader , এটি react-window দিয়ে এটি সম্ভব করে তোলে।

নিম্নলিখিত কোডের টুকরোটি বিবেচনা করুন যা রাষ্ট্রের একটি উদাহরণ দেখায় যা কোনও প্যারেন্ট App উপাদানটিতে পরিচালিত হয়।

import React, { Component } from 'react';

import ListComponent from './ListComponent';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [], // instantiate initial list here
      moreItemsLoading: false,
      hasNextPage: true
    };

    this.loadMore = this.loadMore.bind(this);
  }

  loadMore() {
   // method to fetch newer entries for the list
  }

  render() {
    const { items, moreItemsLoading, hasNextPage } = this.state;

    return (
      <ListComponent
        items={items}
        moreItemsLoading={moreItemsLoading}
        loadMore={this.loadMore}
        hasNextPage={hasNextPage}
      />
    );
  }
}

export default App;

একটি loadMore পদ্ধতিটি একটি শিশু ListComponent কমপোনেন্টে পাস করা হয় যা অসীম লোডার তালিকা ধারণ করে। এটি গুরুত্বপূর্ণ কারণ ব্যবহারকারী একটি নির্দিষ্ট পয়েন্ট পেরিয়ে গেলে আরও আইটেম লোড করতে অসীম লোডারকে কলব্যাক ফায়ার করতে হবে।

তালিকাটি রেন্ডার করে এমন ListComponent এখানে দেখতে কেমন হতে পারে:

import React from 'react';
import { FixedSizeList } from 'react-window';
import InfiniteLoader from "react-window-infinite-loader";

const ListComponent = ({ items, moreItemsLoading, loadMore, hasNextPage }) => {
  const Row = ({ index, style }) => (
     {/* define the row component using items[index] */}
  );

  const itemCount = hasNextPage ? items.length + 1 : items.length;

  return (
    <InfiniteLoader
      isItemLoaded={index => index < items.length}
      itemCount={itemCount}
      loadMoreItems={loadMore}
    >
      {({ onItemsRendered, ref }) => (
        <FixedSizeList
          height={500}
          width={500}
          itemCount={itemCount}
          itemSize={120}
          onItemsRendered={onItemsRendered}
          ref={ref}
        >
          {Row}
        </FixedSizeList>
      )}
  </InfiniteLoader>
  )
};

export default ListComponent;

এখানে, FixedSizeList উপাদানটি InfiniteLoader মধ্যে আবৃত। লোডারকে নির্ধারিত প্রপসগুলি হ'ল:

isItemLoaded : পদ্ধতি যা কোনও নির্দিষ্ট আইটেম লোড হয়েছে কিনা তা যাচাই করে
itemCount : তালিকায় আইটেমের সংখ্যা (বা প্রত্যাশিত)
loadMoreItems : কলব্যাক যা এমন একটি প্রতিশ্রুতি দেয় যা তালিকার জন্য অতিরিক্ত ডেটাতে সমাধান করে

একটি রেন্ডার প্রপ ব্যবহার করা হয় এমন একটি ফাংশন ফেরত দিতে যা তালিকার উপাদানটি রেন্ডার করার জন্য ব্যবহার করে। উভয় onItemsRendered এবং ref বৈশিষ্ট্যগুলি এমন বৈশিষ্ট্য যা প্রবেশ করা দরকার।

ভার্চুয়ালাইজড তালিকার সাথে কীভাবে অসীম লোডিং কাজ করতে পারে তার একটি উদাহরণ নীচে রয়েছে।

তালিকার নীচে স্ক্রোলিং একইরকম অনুভূত হতে পারে তবে প্রতিবার আপনি তালিকার শেষের কাছাকাছি স্ক্রোল করার সময় এলোমেলো ব্যবহারকারী এপিআই থেকে 10 জন ব্যবহারকারীকে পুনরুদ্ধার করার জন্য এখন একটি অনুরোধ করা হয়েছে। একবারে ফলাফলের একক "উইন্ডো" রেন্ডার করার সময় এটি সমস্তই সম্পন্ন হয়।

একটি নির্দিষ্ট আইটেমের index পরীক্ষা করে, নতুন এন্ট্রিগুলির জন্য কোনও অনুরোধ করা হয়েছে কিনা এবং আইটেমটি এখনও লোড হচ্ছে তার উপর নির্ভর করে কোনও আইটেমের জন্য একটি আলাদা লোডিং রাষ্ট্র দেখানো যেতে পারে।

যেমন:

const Row = ({ index, style }) => {
  const itemLoading = index === items.length;

  if (itemLoading) {
      // return loading state
  } else {
      // return item
  }
};

ওভারস্ক্যানিং

যেহেতু ভার্চুয়ালাইজড তালিকার আইটেমগুলি কেবল তখনই পরিবর্তিত হয় যখন ব্যবহারকারী স্ক্রোল করে, ফাঁকা স্থানটি সংক্ষেপে ফ্ল্যাশ করতে পারে কারণ নতুন এন্ট্রি প্রদর্শিত হতে চলেছে। এটি লক্ষ্য করার জন্য আপনি এই গাইডের পূর্ববর্তী যে কোনও উদাহরণ দ্রুত স্ক্রোল করার চেষ্টা করতে পারেন।

ভার্চুয়ালাইজড তালিকাগুলির ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে, react-window আপনাকে overscanCount সম্পত্তি সহ আইটেমগুলি ওভারস্ক্যান করতে দেয়। এটি আপনাকে সর্বদা রেন্ডার করতে দৃশ্যমান "উইন্ডো" এর বাইরে কতগুলি আইটেম সংজ্ঞায়িত করতে দেয়।

<FixedSizeList
  //...
  overscanCount={4}
>
  {...}
</FixedSizeList>

overscanCount FixedSizeList এবং VariableSizeList উভয় উপাদানগুলির জন্য কাজ করে এবং এর একটি ডিফল্ট মান রয়েছে 1 এর একটি ডিফল্ট মান রয়েছে যার উপর নির্ভর করে প্রতিটি আইটেমের আকারের পাশাপাশি, কেবলমাত্র একটি প্রবেশের চেয়ে বেশি ওভারস্ক্যানিং ব্যবহারকারী স্ক্রোলগুলি খালি জায়গার একটি লক্ষণীয় ফ্ল্যাশ প্রতিরোধে সহায়তা করতে পারে। যাইহোক, অতিরিক্ত অনেকগুলি এন্ট্রি ওভারস্ক্যানিং পারফরম্যান্সকে নেতিবাচকভাবে প্রভাবিত করতে পারে। ভার্চুয়ালাইজড তালিকাটি ব্যবহারের পুরো বিষয়টি হ'ল যে কোনও মুহুর্তে ব্যবহারকারী কী দেখতে পাবে তার এন্ট্রিগুলির সংখ্যা হ্রাস করা, সুতরাং ওভারস্ক্যানড আইটেমগুলির সংখ্যা যতটা সম্ভব কম রাখার চেষ্টা করুন।

FixedSizeGrid এবং VariableSizeGrid জন্য, যথাক্রমে ওভারস্ক্যানে কলাম এবং সারিগুলির সংখ্যা নিয়ন্ত্রণ করতে overscanColumnsCount এবং overscanRowsCount বৈশিষ্ট্যগুলি ব্যবহার করুন।

উপসংহার

আপনার অ্যাপ্লিকেশনটিতে তালিকা এবং টেবিলগুলি কোথায় ভার্চুয়ালাইজিং শুরু করবেন তা যদি আপনি নিশ্চিত না হন তবে এই পদক্ষেপগুলি অনুসরণ করুন:

রেন্ডারিং এবং স্ক্রোলিং পারফরম্যান্স পরিমাপ করুন। এই নিবন্ধটি দেখায় যে কীভাবে ক্রোম ডিভটুলগুলিতে এফপিএস মিটারগুলি কোনও তালিকায় আইটেমগুলি কীভাবে দক্ষতার সাথে রেন্ডার করা হয় তা অন্বেষণ করতে ব্যবহার করা যেতে পারে।
পারফরম্যান্সকে প্রভাবিত করে এমন কোনও দীর্ঘ তালিকা বা গ্রিডের জন্য react-window অন্তর্ভুক্ত করুন।
যদি react-window সমর্থিত কিছু বৈশিষ্ট্য রয়েছে তবে আপনি যদি এই কার্যকারিতাটি নিজেই যুক্ত করতে না পারেন তবে react-virtualized ব্যবহার করার বিষয়টি বিবেচনা করুন।
আপনার ভার্চুয়ালাইজড তালিকাটি react-window-infinite-loader দিয়ে মোড়ানো যদি আপনার ব্যবহারকারী স্ক্রোল হিসাবে অলস লোড আইটেমগুলির প্রয়োজন হয়।
খালি সামগ্রীর ফ্ল্যাশ রোধ করতে আপনার গ্রিডগুলির জন্য আপনার তালিকাগুলির জন্য overscanCount সম্পত্তি এবং overscanColumnsCount এবং overscanRowsCount বৈশিষ্ট্যগুলি ব্যবহার করুন। খুব বেশি এন্ট্রিগুলিকে ওভারস্ক্যান করবেন না কারণ এটি কর্মক্ষমতা নেতিবাচকভাবে প্রভাবিত করবে।