ES6 বর্গ ভিত্তিক প্রতিক্রিয়া উপাদান বনাম কার্যকরী ES6 প্রতিক্রিয়া উপাদানগুলি কখন ব্যবহার করবেন?

Question

প্রতিক্রিয়া শিখে কিছু সময় ব্যয় করার পরে আমি উপাদান তৈরির দুটি প্রধান দৃষ্টান্তের মধ্যে পার্থক্য বুঝতে পারি।

আমার প্রশ্নটি হল কখন কোনটি ব্যবহার করব এবং কেন? একে অপরের থেকে কী কী সুবিধা / ট্রেড অফ রয়েছে?

---

ES6 ক্লাস:

import React, { Component } from 'react';

export class MyComponent extends Component {
  render() {
    return (
      <div></div>
    );
  }
}

---

প্রায়োগিক:

const MyComponent = (props) => {
    return (
      <div></div>
    );
}

আমি যখনই কোন উপাদানটি দ্বারা চালিত করার মতো রাষ্ট্র নেই তখন আমি কার্যকরী ভাবছি, তবে এটি কি তাই?

আমি অনুমান করছি যে আমি যদি কোনও জীবনচক্র পদ্ধতি ব্যবহার করি তবে একটি শ্রেণিভিত্তিক উপাদান দিয়ে যাওয়া ভাল।

Comments

দেখে মনে হচ্ছে আপনি ইতিমধ্যে উত্তরটি জানেন।

— ফেলিক্স ক্লিং

যদি আপনার কেবল রেন্ডার পদ্ধতিতে কোনও উপাদান থাকে তবে আপনি এটিকে কার্যকরী আকারে রূপান্তর করতে পারেন। স্টেটলেস রেন্ডার ফাংশনের চেয়ে যদি আপনার আরও কিছু প্রয়োজন হয়, ক্লাস ব্যবহার করুন

— -বরিস

আরও সংক্ষিপ্ত হওয়ার চেষ্টা করুন:const MyComponent = (props) => <div>...</div>

— উইলিয়াম সিমকো

আমি এটিকে এড়ানো যেতে পারলে কখনও ফাংশনাল ব্যবহার করি না। কারণ আমি অনিবার্যভাবে রাস্তার নিচে ক্লাস ভিত্তিক রিফ্যাক্টরের প্রয়োজন শেষ করি। এবং তারপরে প্রায়শই রিফ্যাক্টরটির পরে কার্যকরী করতে হবে।

— কিথজগ্রান্ট

2020-এ সঠিক পদ্ধতিটি হ'ল যেখানেই সম্ভব কার্যকরী উপাদানগুলি ব্যবহার করা, কারণ তারা হুক সমর্থন করে এবং হুকগুলি বিকল্পের চেয়ে দক্ষতা (পারফরম্যান্স-ওয়াইজ এবং আর্কিটেকচারালি) ভাল better

— polkovnikov.ph

Answer 1

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

এগুলি হালকা হওয়ায় এই সাধারণ উপাদানগুলি কার্যকরী উপাদান হিসাবে লেখার বিষয়টি প্রমিত।

যদি আপনার উপাদানগুলির আরও কার্যকারিতা প্রয়োজন হয়, যেমন রাষ্ট্র বজায় রাখা, পরিবর্তে ক্লাস ব্যবহার করুন।

আরও তথ্য: https://facebook.github.io/react/docs/reusable-components.html#es6- শ্রেণি

---

সম্পাদনা : উপরের বেশিরভাগটি সত্য ছিল, প্রতিক্রিয়া হুকগুলির প্রবর্তন না হওয়া পর্যন্ত।

• componentDidUpdate সঙ্গে প্রতিলিপি করা যেতে পারে useEffect(fn) , যেখানে fnরেন্ডারিংয়ের উপর ফাংশনটি চালানো হবে।

• componentDidMountপদ্ধতিগুলি useEffect(fn, [])যেখানে প্রতিলিপি করা যেতে পারেfn রেন্ডারিংয়ের উপর ফাংশনটি চালানো হবে এবং []অবজেক্টগুলির একটি অ্যারে রয়েছে যার জন্য উপাদানটি পুনরায় সরবরাহ করা হবে, যদি এবং কেবলমাত্র যদি পূর্ববর্তী রেন্ডার থেকে কমপক্ষে একটির মান পরিবর্তন হয়। যেহেতু কিছুই নেই, useEffect()একবারে প্রথম রান করুন runs

• stateএর সাথে প্রতিলিপি করা যেতে পারে useState(), যার রিটার্ন মানটি রাষ্ট্রের একটি রেফারেন্সে তৈরি করা যেতে পারে এবং এমন একটি ফাংশন যা রাষ্ট্র সেট করতে পারে (যেমন,const [state, setState] = useState(initState) )একটি উদাহরণ এটি আরও স্পষ্টভাবে ব্যাখ্যা করতে পারে:

const Counter = () => {
  const [count, setCount] = useState(0)

  const increment = () => { 
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
    </div>
  )
}

default export Counter

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

"ইভেন্ট হ্যান্ডলিং ফাংশনগুলি কার্যকরী উপাদানগুলিতে রেন্ডার অনুযায়ী পুনরায় সংজ্ঞায়িত হয়"

যদিও সত্য, আপনার উপাদানগুলি যদি এমন গতি বা ভলিউমে সত্যিই রেন্ডার করে থাকে তবে এটি বিবেচনা করার মতো হবে কিনা দয়া করে বিবেচনা করুন।

তারা হন, তাহলে আপনি ব্যবহার ফাংশন redefining প্রতিরোধ করতে পারি useCallbackএবং useMemoআঙ্গুলসমূহ। তবে মনে রাখবেন যে এটি আপনার কোড তৈরি করতে পারে (অণুবীক্ষণিকভাবে) পারফরম্যান্সে আরও খারাপ ।

তবে সত্যি কথা বলতে, আমি কখনও প্রতিক্রিয়া অ্যাপ্লিকেশনগুলিতে ফাংশনগুলিকে বাধা হিসাবে বলতে চাইনি। অকালীন অপটিমাইজেশন হ'ল সমস্ত অশুভের মূলে - কোনও সমস্যা হলে এটিকে নিয়ে চিন্তা করুন

Comments

কার্যকারিতা সম্পর্কে কী যা রাষ্ট্র রাখে না, তবে উপাদানটির সাথে দৃ tight়ভাবে মিলিত হয়, উদাহরণস্বরূপ রেন্ডারের জন্য কিছু গতিশীল বৈশিষ্ট্য নির্ধারণ করুন।

— ডেনিস

প্রতিক্রিয়ার দুটি ধরণের উপাদানগুলির মধ্যে পার্থক্য সম্পর্কে এটি সেরা নিবন্ধ: কোড. tutsplus.com/tutorials/…

— অ্যারিয়ান অ্যাকোস্টা

১.8.৮ এর প্রতিক্রিয়া অনুসারে, আপনি useStateহুকের মাধ্যমে কার্যকরী উপাদানগুলিতে রাজ্যটি ব্যবহার করতে পারেন ।

— গ্রেগ

১.8.৮ এর প্রতিক্রিয়া অনুসারে, আপনি কার্যকরী উপাদানগুলিতে প্রায় সমস্ত কিছু করতে পারেন এবং সমস্ত প্রভাবগুলি পরিশেষে কেবলমাত্র কর্মক্ষমতাটিতে একটি সর্বনিম্ন প্রভাব নিয়ে মডিউলাইজ করা যায়।

— polkovnikov.ph

আপনি কোথায় তথ্য খুঁজে পেয়েছেন Facebook officially recommends using functional components wherever possible?

— জোহাঁঞ্চোপিন

Answer 2

যখনই সম্ভব রাষ্ট্রহীন ফাংশন (কার্যকরী উপাদান) ব্যবহার করার চেষ্টা করুন। এমন পরিস্থিতিতে রয়েছে যেখানে আপনাকে নিয়মিত প্রতিক্রিয়া শ্রেণি ব্যবহার করতে হবে:

• উপাদানটির রাষ্ট্র বজায় রাখা দরকার
• উপাদানটি খুব বেশি পুনরায় রেন্ডারিং করছে এবং আপনাকে এটির মাধ্যমে নিয়ন্ত্রণ করতে হবে shouldComponentUpdate
• আপনার একটি ধারক উপাদান দরকার

হালনাগাদ

এখন একটি প্রতিক্রিয়া শ্রেণি বলা হয়েছে PureComponentযে আপনি প্রসারিত করতে পারেন (পরিবর্তে Component) যা এটির নিজের প্রয়োগ করে যা আপনার shouldComponentUpdateজন্য অগভীর প্রপস তুলনা যত্ন নেয়। আরও পড়ুন

Comments

Always try to use stateless functions (functional components) whenever possible.আমি দশ জন এটি পড়েছি বলেছি। তারপরেও কেউই এর কারণ ব্যাখ্যা করেনি।

— রোটারেটি

In an ideal world, most of your components would be stateless functions because in the future we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations. This is the recommended pattern, when possible.আরও তথ্য: facebook.github.io/react/docs/…

— ডায়োগো কার্ডোসো

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

— দরজা_সংখ্যা_সত্রী

আপনার নিজের ইভেন্ট হ্যান্ডলার সংজ্ঞা থাকলে আপনি একটি কম্পোনেন্ট শ্রেণি তৈরি করতেও চাইবেন। আপনি প্রতিটি রেন্ডারে একটি নতুন নতুন ফাংশন তৈরির পরিবর্তে এই ইভেন্ট হ্যান্ডলারগুলিকে কনস্ট্রাক্টরের অংশটিতে প্রি-বন্ড করতে পারেন। মনে রাখবেন যে আপনার সমস্ত ইভেন্ট হ্যান্ডলার যদি প্রপস থেকে আসে তবে এটির দরকার নেই।

— ডাবিস ভান্ডারমির

নোট করুন যে উদ্ধৃত ফেসবুকের সুপারিশটি আর নেই ( উপরে আমার মন্তব্য দেখুন )।

— গ্যারেট

Answer 3

আপডেট মার্চ 2019

https://overreacted.io/how-are-function-components-different-from-classes/

ফেব্রুয়ারী 2019 আপডেট করুন:

রিএ্যাক্ট হুকের প্রবর্তনের সাথে , দেখে মনে হচ্ছে যেমন প্রতিক্রিয়া দলগুলি যখনই সম্ভব আমাদের কার্যকরী উপাদানগুলি ব্যবহার করতে চায় (যা জাভাস্ক্রিপ্টের কার্যকরী প্রকৃতির আরও ভালভাবে অনুসরণ করে)।

তাদের অনুপ্রেরণা:

1.) It’s hard to reuse stateful logic between components
2.) Complex components become hard to understand
3.) Classes confuse both people and machines

উপরের অঙ্কন ব্যাকগুলির কোনও উল্লেখ না করে হুক সহ একটি কার্যকরী উপাদান শ্রেণীর উপাদানগুলি প্রায় সবকিছু করতে পারে।

আপনি সক্ষম হওয়ার সাথে সাথে এগুলি ব্যবহার করার পরামর্শ দিচ্ছি।

আসল উত্তর

ক্রিয়াকলাপী উপাদানগুলি শ্রেণিভিত্তিক উপাদানগুলির চেয়ে বেশি হালকা নয়, "তারা ক্লাস হিসাবে ঠিক পারফর্ম করে।" - https://github.com/facebook/react/issues/5677#issuecomment-241190513

উপরের লিঙ্কটি কিছুটা তারিখযুক্ত, তবে প্রতিক্রিয়া 16.7.0 এর নথিতে বলা হয়েছে যে কার্যকরী এবং শ্রেণিবদ্ধ উপাদান:

"প্রতিক্রিয়ার দৃষ্টিকোণ থেকে সমান।" - https://reactjs.org/docs/components-and-props.html#stateless-funtions

একটি ক্রিয়াকলাপী উপাদান এবং একটি বর্গ উপাদানগুলির মধ্যে মূলত কোনও পার্থক্য নেই যা কেবল সিন্ডাক্স ব্যতীত রেন্ডার পদ্ধতি প্রয়োগ করে।

ভবিষ্যতে (উপরের লিঙ্কটি উদ্ধৃত করে) "আমরা [প্রতিক্রিয়া] এ জাতীয় অপ্টিমাইজেশন যুক্ত করতে পারে।"

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

- https://reactjs.org/docs/react-api.html#reactmemo

- https://reactjs.org/docs/react-api.html#reactpurecomp घटक

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

Comments

আমি মনে করি প্রতিটি উপাদানকে প্রতিক্রিয়া প্রসারিত করা হবে। উপাদানটি কোডটি আরও পঠনযোগ্য করে তোলে, বিশেষত নতুনদের জন্য। আপনি যখন দেখতে পান যে কোনও উপাদান প্রতিটি বারের মতো একইভাবে তৈরি হয়েছিল It @ গালুপুফের মত বলেছে, সাধারণ উপাদানগুলির কাছে "রেন্ডার ()" নামে একটি পদ্ধতি রয়েছে। প্রতিক্রিয়াটিকে সবকিছু প্রসারিত করাও দুর্দান্ত omp কারণ উপাদানগুলি যখন আপনি "এটি" বন্ডিং শুরু করতে চান, রাষ্ট্র থাকা ইত্যাদি you যখন আপনার সবকিছুকে চুল্লি করতে হবে না, আপনি কেবল যা প্রয়োজন তা যোগ করতে পারেন।

— jeffski13

Answer 4

১ 16.৮ এর প্রতিক্রিয়া অনুসারে স্টেটলেস ফাংশনাল উপাদানগুলি বিভ্রান্তিমূলক এবং এড়ানো উচিত কারণ তারা আর রাষ্ট্রহীন নয় ( রিঅ্যাক্ট.এসএফসি অনুন্নত , ড্যান আব্রামভ রিঅ্যাক্ট.এসএফসি তে ), তাদের একটি রাষ্ট্র থাকতে পারে, তাদের হুক থাকতে পারে (যে হিসাবে কাজ করে লাইফাইসাইকেল পদ্ধতিগুলি) পাশাপাশি, তারা শ্রেণি উপাদানগুলির সাথে কমবেশি ওভারল্যাপ করে

ক্লাস ভিত্তিক উপাদান

• অবস্থা
• জীবনচক্র পদ্ধতি
• প্রতিক্রিয়া.পিউরকমম্পোনেন্ট সহ স্মৃতিচারণ

কার্যকরী উপাদান:

• স্টেট ( ইউজ স্টেট , ইউজারডুসার হুকস )
• জীবনচক্র পদ্ধতি ( ইউজএফেক্ট , ইউজ লেআউটএফেক্ট হুকের মাধ্যমে )
• মেমো এইচওসি এর মাধ্যমে স্মৃতিচারণ করুন

আমি ফাংশনাল উপাদানগুলি কেন পছন্দ করি

• UseEffect হুক যা একত্রিত করতে একটি খুব পরিষ্কার এবং সংক্ষিপ্ত উপায় প্রদান প্রতিক্রিয়া componentDidMount, componentDidUpdateএবংcomponentWillUnmount জীবনচক্র পদ্ধতি
• হুকের সাহায্যে আপনি যুক্তিটি বের করতে পারেন যা সহজেই উপাদান এবং পরীক্ষার জন্য ভাগ করা যায়
• স্কোপিং সম্পর্কে কম বিভ্রান্তি

কেন হুক ব্যবহার করে উদ্বুদ্ধকরণ প্রতিক্রিয়া (যেমন কার্যকরী উপাদান)।