React.forwardRef বনাম কাস্টম রেফ ব্যবহার করার মান


13

আমি দেখতে পাচ্ছি যে রিঅ্যাক্ট.ফরওয়ার্ড রেফটি শিশুটির ক্রিয়াকলাপী উপাদানগুলিতে একটি প্রতিক্রিয়া দেওয়ার জন্য অনুমোদিত প্রতিক্রিয়া বলে মনে হচ্ছে, প্রতিক্রিয়া দস্তাবেজগুলি থেকে:

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

যাইহোক, কেবল একটি কাস্টম প্রোপ পাস করার মাধ্যমে এটি করার সুবিধা কী ?:

const FancyButton = ({ innerRef }) => (
  <button ref={innerRef} className="FancyButton">
    {props.children}
  </button>
));

const ref = React.createRef();
<FancyButton innerRef={ref}>Click me!</FancyButton>;

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

উদাহরণস্বরূপ বলুন আপনি একাধিক রেফগুলি পাস করতে চেয়েছিলেন (যা টিবিএইচ, কোড গন্ধ নির্দেশ করতে পারে তবে তবুও), তবে আমি দেখতে পাচ্ছি কেবলমাত্র সমাধানটি হ'ল কাস্টমফ প্রপস ব্যবহার করা।

আমার অনুমান আমার প্রশ্নটি forwardRefকোন কাস্টম প্রোপ ব্যবহারের মূল্য কী ?

উত্তর:


3

এমনকি প্রতিক্রিয়া দস্তাবেজগুলি কাস্টম রেফ প্রপাকে আরও নমনীয় পদ্ধতির হিসাবে উল্লেখ করেছে forwardRef:

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

একটি বাক্যও আছে , যেখানে ড্যান আব্রামভ তার সুবিধাগুলি সম্পর্কে লিখেছেন:

  • সমস্ত প্রতিক্রিয়া সংস্করণ সঙ্গে সামঞ্জস্যপূর্ণ
  • ক্লাস এবং ফাংশন উপাদান জন্য কাজ করে
  • নীচে থাকা উপাদানগুলিতে বেশ কয়েকটি স্তর গভীরভাবে রেফকে সরানো সহজ করে

আমি যুক্ত করব, যে স্বাভাবিক প্রপস হিসাবে রেফগুলি পাস করার ফলে ভঙ্গ পরিবর্তন ঘটে না এবং একাধিক রেফের জন্য যাওয়ার উপায়। forwardRefআমার মনে আসার একমাত্র সুবিধা :

  • ডোম নোড, ক্রিয়ামূলক এবং শ্রেণি উপাদানগুলির জন্য অভিন্ন অ্যাক্সেস এপিআই (আপনি এটি উল্লেখ করেছেন)
  • ref গুণাবলী আপনার প্রপস এপিআই ফুলবে না, যেমন আপনি টাইপস্ক্রিপ্টের সাথে প্রকার সরবরাহ করেন

যখন কাস্টম প্রোপ পাস করা আলাদাভাবে প্রভাবিত করে যখন এটি রেন্ডারিং এবং অতিরিক্ত রেন্ডারগুলির কারণ হয়?

যদি আপনি কোনও ইনলাইন কলব্যাক রেফ ফাংশন প্রপ হিসাবে নিচে পাস করেন তবে একটি রেফ সম্ভাব্যভাবে একটি রি-রেন্ডার ট্রিগার করতে পারে । তবে শ্রেণি উদাহরণ পদ্ধতি হিসাবে বা এর মতো কোনও স্মৃতিচারণের মাধ্যমে এটি সংজ্ঞায়িত করা আরও ভাল ধারণাuseCallback


1
অসাধারণ ধন্যবাদ ফোর্ড, আমি একধরণের ভেবেছিলাম যে এটি হতে পারে কেবল এটির উপরে কিছু আলোকপাত করতে আগ্রহী।
লেসবা

0

RefReactউপাদানগুলির মধ্যে একটি আদর্শ সম্পত্তি ।

কিছু উপাদান যা অতিরিক্ত কার্যকারিতা সরবরাহ করার জন্য অন্যান্য উপাদানগুলিকে মোড়ক করে, মোড়ানো উপাদানটিকে refউল্লেখ করতে ব্যবহার করে এবং আশা করে যে উপাদানটির refসম্পত্তি আছে।

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

ফাংশন উপাদানগুলির "রেফ" সম্পত্তি থাকতে পারে forwardRefনা এবং refসম্পত্তি সরবরাহের পরিবর্তে অবশ্যই ব্যবহার করতে হবে ।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.