HOC এবং Render Props এর মধ্যে তুলনা

ReactJS এ Reusable Components এবং HOC (Higher-Order Components) - রিয়্যাক্ট জেএস (ReactJS) - Web Development

365

ReactJS-এ Higher Order Components (HOC) এবং Render Props দুটি জনপ্রিয় প্যাটার্ন, যা কম্পোনেন্টের মধ্যে পুনঃব্যবহারযোগ্য কোড শেয়ার করার জন্য ব্যবহৃত হয়। যদিও এই দুটি প্যাটার্নের উদ্দেশ্য এক, তবে এগুলির কাজ করার পদ্ধতি এবং ব্যবহার কিছুটা ভিন্ন।

এখানে, আমরা HOC এবং Render Props এর মধ্যে পার্থক্য এবং তাদের ব্যবহার নিয়ে বিস্তারিত আলোচনা করব।

Higher Order Component (HOC)

Higher Order Component (HOC) হল একটি ফাংশন যা একটি কম্পোনেন্ট গ্রহণ করে এবং তাকে আরও এক বা একাধিক কম্পোনেন্ট দিয়ে রেন্ডার করে। এটি একটি পুনঃব্যবহারযোগ্য লজিক তৈরি করতে সাহায্য করে, যা একটি কম্পোনেন্টে অন্তর্ভুক্ত করা যেতে পারে।

HOC এর বৈশিষ্ট্য:

কম্পোনেন্টকে প্যারামিটার হিসেবে গ্রহণ করে: HOC একটি কম্পোনেন্ট গ্রহণ করে এবং নতুন কম্পোনেন্ট রিটার্ন করে।
প্রোপস পরিবর্তন করে: HOC কম্পোনেন্টের প্রোপস বদলাতে বা অতিরিক্ত ফাংশনালিটি যোগ করতে পারে।
স্টেট, লজিক এবং ফাংশন শেয়ার করতে ব্যবহৃত হয়: এটি পুনঃব্যবহারযোগ্য লজিক এবং ডেটা শেয়ার করতে ব্যবহৃত হয়।

HOC এর উদাহরণ:

import React from 'react';

// HOC ফাংশন
function withLogging(WrappedComponent) {
  return function (props) {
    console.log('Rendering component:', WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
}

// মূল কম্পোনেন্ট
function MyComponent() {
  return <h1>Hello, World!</h1>;
}

// HOC ব্যবহার
const MyComponentWithLogging = withLogging(MyComponent);

export default MyComponentWithLogging;

এখানে, withLogging একটি HOC যা MyComponent কে গ্রহণ করে এবং তা রেন্ডার করার আগে কম্পোনেন্টের নাম কনসোলে লগ করে।

Render Props

Render Props হল একটি প্যাটার্ন যেখানে একটি কম্পোনেন্ট একটি ফাংশন পাস করে, যা রেন্ডার করার সময় তার UI তৈরি করতে ব্যবহৃত হয়। সাধারণত, এই ফাংশনটি কম্পোনেন্টের ভিতরে ডেটা বা স্টেট পাস করে, এবং এর মাধ্যমে UI কাস্টমাইজ করা হয়।

Render Props এর বৈশিষ্ট্য:

ফাংশন পাস করা হয়: Render Props-এ কম্পোনেন্ট একটি ফাংশন পাস করে, যা UI রেন্ডার করার সময় ডেটা গ্রহণ করে।
ডেটা এবং স্টেট শেয়ার করা হয়: এটি স্টেট, ডেটা, বা লজিক শেয়ার করতে ব্যবহৃত হয়, এবং রেন্ডার করার জন্য UI কাস্টমাইজ করা যায়।
স্টেট নিয়ন্ত্রণে সুবিধা: Render Props স্টেট নিয়ন্ত্রণ করতে এবং সেই স্টেটের ভিত্তিতে UI পরিবর্তন করতে সহজ উপায় সরবরাহ করে।

Render Props এর উদাহরণ:

import React, { useState } from 'react';

// Render Props ব্যবহারকারী কম্পোনেন্ট
function MouseTracker({ render }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    setPosition({ x: event.clientX, y: event.clientY });
  };

  return (
    <div onMouseMove={handleMouseMove}>
      {render(position)} {/* render প্রোপস পাস করা */}
    </div>
  );
}

// মূল কম্পোনেন্ট
function App() {
  return (
    <MouseTracker
      render={(position) => (
        <h1>Mouse position: {position.x}, {position.y}</h1>
      )}
    />
  );
}

export default App;

এখানে, MouseTracker কম্পোনেন্ট একটি render ফাংশন পাস করে, যা মাউসের অবস্থান রেন্ডার করার জন্য UI তৈরি করে।