প্রতিক্রিয়া.কম্পোনেন্ট বনাম প্রতিক্রিয়া.পিউর কম্পোনেন্ট onent


224

সরকারী দস্তাবেজ প্রতিক্রিয়া রাষ্ট্র যে " React.PureComponent's shouldComponentUpdate()শুধুমাত্র জিওপার্ডিতে বস্তু তুলনা", এবং এই বিরুদ্ধে উপদেশ যদি রাষ্ট্র "গভীর" হয়।

এটি দেওয়া, React.PureComponentপ্রতিক্রিয়া উপাদান তৈরি করার সময় কারও পছন্দ করা উচিত বলে কোনও কারণ আছে ?

প্রশ্নসমূহ :

  • React.Componentআমরা যাবার জন্য বিবেচনা করতে পারি তাতে ব্যবহারের কোনও প্রভাব আছে React.PureComponentকি?
  • আমি অনুমান করছি shouldComponentUpdate()এর PureComponentশুধুমাত্র অগভীর তুলনা সম্পাদন করে। এটি যদি হয়, তবে আরও গভীর তুলনার জন্য পদ্ধতিটি ব্যবহার করা যাবে না?
  • "অধিকন্তু, React.PureComponentএর shouldComponentUpdate()ছেড়ে যাওয়া পুরো উপাদান সাবট্রি জন্য আপডেট ঠেকনা" - এই যে ঠেকনা পরিবর্তন উপেক্ষা করা হয় এর অর্থ কি?

এই মিডিয়াম ব্লগে পড়া থেকে প্রশ্ন উঠেছে , যদি এটি সাহায্য করে।


5
আমি জানি যে আপনি এটি পোস্ট করার পরে কয়েক মাস হয়েছে, কিন্তু আমি ভেবেছিলাম এই নিবন্ধটি সাহায্য করতে পারে: 60devs.com/pure-comp
घटक-

উত্তর:


282

মধ্যে প্রধান পার্থক্য React.PureComponentএবং React.Componentহয় PureComponentএকটি করে অগভীর তুলনা রাষ্ট্র পরিবর্তনের উপর। এর অর্থ হ'ল স্কেলারের মানগুলির তুলনা করার সময় এটি তাদের মানগুলির সাথে তুলনা করে তবে বস্তুর সাথে তুলনা করার সময় এটি কেবলমাত্র রেফারেন্সের সাথে তুলনা করে। এটি অ্যাপ্লিকেশনটির কার্যকারিতা উন্নত করতে সহায়তা করে।

আপনি React.PureComponentযখন নীচের যে কোনও শর্ত পূরণ করতে পারেন তখন আপনার উচিত ।

  • রাজ্য / প্রপস একটি অপরিবর্তনীয় বস্তু হওয়া উচিত
  • রাজ্য / প্রপসের একটি শ্রেণিবিন্যাস থাকা উচিত নয়
  • forceUpdateডেটা পরিবর্তন হলে আপনার কল করা উচিত

আপনি যদি ব্যবহার করছেন তবে React.PureComponentআপনার নিশ্চিত হওয়া উচিত যে সমস্ত সন্তানের উপাদানগুলিও খাঁটি।

আমরা রিঅ্যাক্ট.পিউর কম্পোনেন্টের জন্য যাওয়ার বিষয়ে বিবেচনা করতে পারি এমন React.componal ব্যবহারের ক্ষেত্রে কোনও কার্যকারিতা প্রভাব রয়েছে কি?

হ্যাঁ, এটি আপনার অ্যাপের কার্যকারিতা বাড়িয়ে তুলবে (অগভীর তুলনার কারণে)

আমি অনুমান করছি যে খাঁটি কম্পোনেন্টের কম্পোনেন্ট আপডেট () কেবলমাত্র অগভীর তুলনা করে। যদি এটি হয় তবে গভীর তুলনার জন্য উক্ত পদ্ধতিটি ব্যবহার করা যাবে না?

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

"তদ্ব্যতীত, প্রতিক্রিয়া.পিউর কম্পোনেন্টের উচিত কম্পোনেন্ট আপডেট () সম্পূর্ণ উপাদান সাবট্রির জন্য প্রোপ আপডেটগুলি এড়িয়ে যায়" - এর অর্থ কী প্রপ পরিবর্তনগুলি উপেক্ষা করা হচ্ছে?

হ্যাঁ, প্রপ পরিবর্তনগুলি উপেক্ষা করা হবে যদি এটি অগভীর তুলনায় পার্থক্য না খুঁজে পায়।


1
হাই @ বিমলরাজসঙ্কর এখানে সাহায্যের জন্য ধন্যবাদ। আপনি নিম্নলিখিত বিবৃতির একটি উদাহরণ দিতে দয়া করে করতে পারেন: It means that when comparing scalar values it compares their values, but when comparing objects it compares only references. It helps to improve the performance of the app.? ধন্যবাদ
শান প্যাটেল

1
@ Mr.Script আমি আশা করি এই ইচ্ছার সাহায্যের stackoverflow.com/a/957602/2557900
vimal1083

3
State/Props should not have a hierarchyদুঃখিত, আপনি এখানে কিছুটা শ্রেণিবদ্ধের অর্থ কী তা ব্যাখ্যা করতে পারেন?
স্যানি লুক

1
@ স্যানলিউ এর অর্থ রাষ্ট্র এবং প্রপসগুলিতে কেবল সংখ্যা এবং স্ট্রিংয়ের মতো আদিম মান থাকতে হবে তবে অবজেক্টের মধ্যে বস্তু নয় (একটি শ্রেণিবিন্যাস)।
jedmao

3
যদি রাজ্য / প্রপসগুলি অপরিবর্তনীয় বস্তু হয়, তবে এই স্তরক্রমটি সঠিক হওয়া উচিত এবং ততক্ষণ পিউরকম্পোনেন্ট ব্যবহার করা উচিত যতক্ষণ না এই শ্রেণিবিন্যাস অপরিবর্তনীয় বস্তুটি বজায় রাখে, তাই না?
স্যানি লুক

38

Componentএবং PureComponentএকটি পার্থক্য আছে

PureComponentComponentএটি shouldComponentUpdateআপনার জন্য পদ্ধতিটি পরিচালনা করে তা হুবহু একই ।

যখন প্রপস বা রাষ্ট্র পরিবর্তন হয়, তখন উভয় প্রপস এবং রাজ্যের তুলনায় অগভীর তুলনাPureComponent করবে । অন্যদিকে বর্তমান প্রপস এবং বাক্সের বাইরে বাক্সের সাথে তুলনা করবে না। সুতরাং, যখনই ডাকা হবে তখন উপাদানটি ডিফল্টরূপে পুনরায় রেন্ডার করবে ।ComponentshouldComponentUpdate

অগভীর তুলনা

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

সূত্র: https://codeburst.io/when-to-use-comp घटक- or- purecomponent- a60cfad01a81


প্রতিক্রিয়া.কম্পোনেন্ট => সুতরাং আমি যদি একই প্রপসগুলির সাথে একই উপাদানটিকে পুনরায় রেন্ডার করি। এটি শিশুর রেন্ডারকে ট্রিগার করবে।
প্রপস

23

মূল পার্থক্য, যেমনটি আমি দেখছি, তা হ'ল উপাদানটির প্রপস এবং রাষ্ট্র পরিবর্তন হয়েছে কিনা তা বিবেচনা না করেই প্রতিটি উপাদান তার পিতামাতাকে রিরেন্ডার করে।

অন্যদিকে, খাঁটি উপাদানটির প্রপস (বা রাষ্ট্র) পরিবর্তিত না হলে একটি খাঁটি উপাদান, যদি তার পিতামাতা পুনরায় সরবরাহ করে তবে তা পুনরায় সরবরাহ করতে পারবে না।

উদাহরণস্বরূপ, আসুন আমরা বলতে পারি যে আমাদের তিন-স্তরের শ্রেণিবিন্যাস সহ একটি উপাদান গাছ রয়েছে: পিতা বা মাতা, সন্তান এবং নাতি-নাতনি।

যখন পিতা-মাতার প্রপসগুলি এমনভাবে পরিবর্তন করা হয় যে কেবলমাত্র এক সন্তানের প্রপস পরিবর্তন হয়, তবে:

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

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

ফলাফলটি হ'ল প্রতিবারের মতো রেডুএক্স স্টোরটিতে একটি ছোট্ট পরিবর্তন হলেও, বাচ্চাদের ডেটার পুরো ফ্ল্যাটলিস্ট অ্যারে পুনরায় গণনা করা হয়েছে। এর অর্থ গাছের প্রতিটি উপাদানগুলির জন্য, প্রপসগুলি নতুন অবজেক্ট ছিল, এমনকি মানগুলি পরিবর্তন না হলেও।

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

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