কেন প্রতিক্রিয়া 16 এ টুকরাগুলি ধারক ডিভের চেয়ে ভাল?

Question

প্রতিক্রিয়া ১.2.২-তে, উন্নত সমর্থন Fragmentsযুক্ত করা হয়েছে প্রতিক্রিয়ার ব্লগ পোস্টে আরও তথ্য পাওয়া যাবে এখানে।

আমরা সবাই নিম্নলিখিত কোডের সাথে পরিচিত:

render() {
  return (
    // Extraneous div element :(
    <div>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </div>
  );
}

হ্যাঁ, আমাদের একটি ধারক ডিভ দরকার, তবে এটি কোনও চুক্তির চেয়ে বড় নয়।

প্রতিক্রিয়া 16.2 এ, আমরা পার্শ্ববর্তী ধারক ডিভ এড়াতে এটি করতে পারি:

render() {
  return (
    <Fragment>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </Fragment>
  );
}

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

আমার প্রশ্ন, কেন একটি Fragmentপছন্দসই ব্যবহার করছেন ? এটি পারফরম্যান্সে সহায়তা করে? যদি তাই হয় তবে কেন? কিছু অন্তর্দৃষ্টি পছন্দ করবে।

Comments

পিতামাতার জন্য প্রথম স্তরের বাচ্চাদের তৈরি করার সময় ফ্লেক্সবক্স স্টাইলিংয়ের জন্য এটি সত্যিই দরকারী বলে মনে করি

— উইল্লু

সমস্যাটি divহ'ল আপনি সর্বদা একটি মোড়কের উপাদানটি চান না। মোড়কের উপাদানগুলির একটি অর্থ রয়েছে এবং সাধারণত সেই অর্থটি অপসারণ করার জন্য আপনার অতিরিক্ত শৈলীর প্রয়োজন। <Fragment>কেবলমাত্র সিনট্যাকটিক চিনি যা রেন্ডার হয় না। এমন পরিস্থিতিতে রয়েছে যখন একটি মোড়ক তৈরি করা খুব কঠিন, উদাহরণস্বরূপ এসভিজিতে যেখানে <div>ব্যবহার <group>করা যায় না এবং আপনি যা চান তা সবসময় হয় না।

— সুলতান

Answer 1

1. এটি একটি সামান্য বিট দ্রুত এবং মেমরির ব্যবহার কম (অতিরিক্ত ডিওএম নোড তৈরি করার দরকার নেই)। এটি কেবল খুব বড় এবং / বা গভীর গাছেই সত্যিকারের উপকার পায় তবে অ্যাপ্লিকেশন কর্মক্ষমতা প্রায়শই হাজার কাটা দ্বারা মৃত্যুবরণ করে। এটি একটি কাটা কম।
2. ফ্লেক্সবক্স এবং সিএসএস গ্রিডের মতো কিছু সিএসএস পদ্ধতিগুলির একটি বিশেষ পিতামাতৃত্ব-সন্তানের সম্পর্ক রয়েছে এবং divএর মধ্যে যুক্ত যুক্তিযুক্ত উপাদানগুলি বের করার সময় পছন্দসই বিন্যাসটি রাখা শক্ত করে তোলে।
3. ডিওএম পরিদর্শক কম বিশৃঙ্খলাযুক্ত। :-)

আপনি এই প্রতিক্রিয়া ইস্যুতে কিছু অন্যান্য ব্যবহারের মামলার বিবরণগুলি সন্ধান করতে পারেন: একাধিক উপাদান রেন্ডার থেকে ফেরত দেওয়ার জন্য ফ্র্যাগমেন্ট এপিআই যুক্ত করুন

Comments

৪. সংজ্ঞা তালিকা লেখার বিষয়টি <dt><dd>অনেক সহজ হয়ে যায়। জুটিযুক্ত উপাদানগুলি ফিরিয়ে দেওয়া আগে বিশ্রী ছিল Fragments।

— সানসন 123

খণ্ডগুলি কি দেশ-প্রতিক্রিয়াতে কাজ করে? চেষ্টা করেছি import Fragment from 'react'। তবে এটি আরএন-এ অপরিবর্তিত।

— বিনচিক

কারণ number 2, টেবিলগুলি আসলে আমাদের জন্য সবচেয়ে বড় সমস্যা হয়ে দাঁড়িয়েছে। কিছু বিশ্রী প্রতিক্রিয়া কোডের জন্য প্রয়োজনীয় কাঠামোটি table>tr>td(সম্ভবত সহ theadএবং অনুরূপ) তৈরি হয়েছিল।

— ম্যাটসেম্যান

@ বিনচিক চেষ্টা করেছেন import {Fragment} from 'react'? এটি একটি নামযুক্ত রফতানি।

— সোসকা

3 নম্বরটি সবচেয়ে গুরুত্বপূর্ণ!

— জাচ স্মিথ

Answer 2

উপরের সমস্ত উত্তরের সাথে যুক্ত করার আরও একটি সুবিধা রয়েছে: কোড পঠনযোগ্যতা , Fragmentউপাদান একটি সিনট্যাকটিক চিনির ফর্ম সমর্থন করে <>,। সুতরাং আপনার প্রশ্নের কোড আরও সহজেই এইভাবে লেখা যেতে পারে:

render() {
  return (
    <>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </>
  );
}

ডক্স অনুসারে ,

প্রতিক্রিয়া <React.Fragment/>হিসাবে, এটি পূর্ববর্তী বিভাগের উদাহরণের মতো একটি উপাদানকে পছন্দ করে। (জেএসএক্স ব্যবহার করে এমন প্রতিক্রিয়াবিহীন ফ্রেমওয়ার্কগুলি ভিন্ন কিছুতে সংকলন করতে পারে))

বিশৃঙ্খলাবিহীন, তাই না?

মনে রাখবেন যে আপনি <Fragment>যদি keyখণ্ডটি সরবরাহ করতে চান তবে আপনার এখনও সিনট্যাক্স ব্যবহার করতে হবে ।

Comments

এই সংক্ষিপ্ত সিনট্যাক্সটি বর্তমানে তৈরি-প্রতিক্রিয়া-অ্যাপ্লিকেশনটিতে সমর্থিত নয়। তথ্যসূত্র

— কোডিংপ্ল্যাশ

@ কোডিংপ্ল্যাশ সিআরএ 2.0 এখন রয়েছে।

— জাভেরির সাথে দেখা

সিনট্যাকটিক চিনির এই টুকরোটি দাঁড়াতে পারে না, এটি অজান্তেই দেখায় এবং সামান্য অন্তর্নিহিত অর্থ প্রকাশ করে। অনেক বেশি পছন্দ<Fragment>

— ESR

@ ইএসআর ব্যক্তিগতভাবে আমি এটি পছন্দ করি। এই ভাবে চিন্তা করুন। বাচ্চারা কিছুতেই মোড়ানো নয়, যেমন <> তে কিছুই নেই। অদৃশ্য।

— ব্যবহারকারী 3614030

Answer 3

• জেএসএক্সের সাথে যুক্ত হওয়া বৈশিষ্ট্যগুলি আগে সম্ভব নয়
• আরও ভাল শব্দার্থ জেএসএক্স মার্কআপ। আবশ্যক যখন প্রয়োজন হয় না তখন মোড়কের উপাদানগুলি ব্যবহৃত হয়।
• কম সামগ্রিক ডোম মার্কআপ (রেন্ডার পারফরম্যান্স এবং কম মেমরি ওভারহেড)

এটি যতটা সহজ আপনি যখন কোনও র‍্যাপার এলিমেন্টের প্রয়োজন হয় না তখন আপনাকে কোনওটি ব্যবহার করতে বাধ্য করা হয় না। কম উপাদান থাকা দুর্দান্ত তবে আমি মনে করি সবচেয়ে বড় সুবিধা হ'ল জেএসএক্সে এমন উপাদানগুলি রেন্ডার করতে সক্ষম হওয়া যা আগে সম্ভব ছিল না এবং মোড়কের উপাদানগুলিতে আরও ভাল শব্দার্থক অর্থ যুক্ত করতে পারে কারণ তারা এখন optionচ্ছিক।

এটি আগে সম্ভব ছিল না:

 <select>
    {this.renderOptions()}
 </select>

প্রতিক্রিয়া 15 এ নীচের দিকে নজর দেওয়া আপনি মোড়ক উপাদান প্রয়োজন কিনা তা বলতে পারবেন না:

<span>
  <h1>Hello</h1>
  {this.getContent()}
</span>

Answer 4

Reactjs.org ডক্স অনুসারে ডিভ এর <Fragment> </Fragment>পরিবর্তে সর্বাধিক গুরুত্বপূর্ণ প্রয়োজন হ'ল এইচটিএমএল শব্দার্থ বিরতি এড়ানো। যখন আমরা ডিভি এর পরিবর্তে ব্যবহার করি <Fragment> </Fragment>আমরা এইচটিএমএল শব্দার্থকে ভাঙ্গি break

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

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

<table>
      <tr>
        <div>
          <td>Hello</td>
          <td>World</td>
        </div>
      </tr>
 </table>

খণ্ডগুলি এই সমস্যাটি সমাধান করে।

Answer 5

1. ব্যবহার করে <React.Fragment>...</React.Fragment>, আমরা ডিওমে অতিরিক্ত নোড যুক্ত না করে আমাদের জেএসএক্স উপাদানগুলিতে একটি প্যারেন্ট ট্যাগ যুক্ত করতে পারি।
2. আপনি অতিরিক্ত ডিভ ট্যাগগুলি রিঅ্যাক্ট.ফ্রেগমেন্টের সাথে প্রতিস্থাপন করতে পারেন
3. প্রতিক্রিয়া লেখার জন্য প্রতিটি সময় আপনার পক্ষে খুব দীর্ঘ। প্রতিক্রিয়া.ফ্রেগমেন্টের একটি শর্টহ্যান্ড সিনট্যাক্স রয়েছে যা আপনি ব্যবহার করতে পারেন। এইটা<>...</>.