অ্যারেগুলিতে পুনরাবৃত্তি করার সময় সাবধানতা অবলম্বন করুন !!
এটি একটি সাধারণ ভ্রান্ত ধারণা যে অ্যারেতে উপাদানটির সূচক ব্যবহার করা সম্ভবত আপনি যে ত্রুটিটির সাথে পরিচিত তা দমন করার একটি গ্রহণযোগ্য উপায়:
Each child in an array should have a unique "key" prop.
তবে অনেক ক্ষেত্রে তা হয় না! এটি নিদর্শন বিরোধী যা কিছু পরিস্থিতিতে অযাচিত আচরণের দিকে পরিচালিত করতে পারে ।
keyপ্রোপ বোঝা
প্রতিক্রিয়াটি keyকম্পোনেন্ট-টু-ডম উপাদান উপাদান বোঝার জন্য প্রপ ব্যবহার করে , যা পরে পুনর্মিলন প্রক্রিয়াটির জন্য ব্যবহৃত হয় । এটি তাই যে খুব গুরুত্বপূর্ণ সর্বদা অনন্য থাকে , অন্যথায় একটি ভাল সুযোগ রয়েছে প্রতিক্রিয়াটি উপাদানগুলির সাথে মিশে যায় এবং ভুলটিকে রূপান্তরিত করে। সর্বোত্তম পারফরম্যান্স বজায় রাখার জন্য এই কীগুলি সমস্ত রি-রেন্ডারগুলিতে স্থির থাকে তাও গুরুত্বপূর্ণ ।
বলা হচ্ছে, এক না সবসময় , উপরোক্ত আবেদন করতে হবে প্রদত্ত এটা হয় পরিচিত যে অ্যারের সম্পূর্ণরূপে স্ট্যাটিক হয়। যাইহোক, সেরা অভ্যাস প্রয়োগ যখনই সম্ভব উত্সাহিত করা হয়।
একটি প্রতিক্রিয়া বিকাশকারী ভিতরে বলেছেন এই গিটহাব ইস্যুতে বলেছেন :
- কীটি প্রকৃতপক্ষে পারফরম্যান্সের বিষয়ে নয়, এটি পরিচয় সম্পর্কে আরও বেশি (যা ফলশ্রুতিতে আরও ভাল পারফরম্যান্সের দিকে নিয়ে যায়)। এলোমেলোভাবে নির্ধারিত এবং মান পরিবর্তন করা পরিচয় নয়
- আপনার ডেটা কীভাবে মডেল করা হয়েছে তা না জেনে আমরা বাস্তবে কীগুলি [স্বয়ংক্রিয়ভাবে] সরবরাহ করতে পারি না। আমি আপনাকে আইডি না থাকলে সম্ভবত কিছু ধরণের হ্যাশিং ফাংশন ব্যবহার করার পরামর্শ দেব
- অ্যারে ব্যবহার করার সময় আমাদের কাছে ইতিমধ্যে অভ্যন্তরীণ কী রয়েছে তবে সেগুলি অ্যারের সূচক। আপনি যখন একটি নতুন উপাদান sertোকান, সেই কীগুলি ভুল।
সংক্ষেপে, ক key হওয়া উচিত:
- অনন্য - একটি কী কোনও ভাইবোনের অংশের মতো নয় ।
- স্ট্যাটিক - একটি কী কখনও রেন্ডারগুলির মধ্যে পরিবর্তন করা উচিত নয়।
keyপ্রপ ব্যবহার করা
উপরের ব্যাখ্যা অনুসারে, সাবধানে নিম্নলিখিত নমুনাগুলি অধ্যয়ন করুন এবং সম্ভব হলে, প্রস্তাবিত পদ্ধতির প্রয়োগের চেষ্টা করুন।
খারাপ (সম্ভাব্য)
<tbody>
{rows.map((row, i) => {
return <ObjectRow key={i} />;
})}
</tbody>
প্রতিক্রিয়াটিতে কোনও অ্যারের উপরে পুনরাবৃত্তি করার সময় এটি সবচেয়ে ত্রুটিপূর্ণভাবে দেখা যায় seen এই পদ্ধতিটি প্রযুক্তিগতভাবে "ভুল" নয় , আপনি কী করছেন তা যদি আপনি না জানেন তবে এটি ঠিক ... "বিপজ্জনক" । আপনি যদি কোনও স্ট্যাটিক অ্যারের মাধ্যমে পুনরাবৃত্তি করেন তবে এটি একটি সম্পূর্ণ বৈধ পন্থা (যেমন আপনার নেভিগেশন মেনুতে লিঙ্কগুলির একটি অ্যারে)। তবে, আপনি যদি আইটেমগুলি যোগ, অপসারণ, পুনরায় অর্ডারিং বা ফিল্টারিং করছেন তবে আপনার সতর্কতা অবলম্বন করা উচিত। অফিসিয়াল ডকুমেন্টেশনে এই বিস্তারিত ব্যাখ্যাটি একবার দেখুন ।
class MyApp extends React.Component {
constructor() {
super();
this.state = {
arr: ["Item 1"]
}
}
click = () => {
this.setState({
arr: ['Item ' + (this.state.arr.length+1)].concat(this.state.arr),
});
}
render() {
return(
<div>
<button onClick={this.click}>Add</button>
<ul>
{this.state.arr.map(
(item, i) => <Item key={i} text={"Item " + i}>{item + " "}</Item>
)}
</ul>
</div>
);
}
}
const Item = (props) => {
return (
<li>
<label>{props.children}</label>
<input value={props.text} />
</li>
);
}
ReactDOM.render(<MyApp />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
এই স্নিপেটে আমরা একটি স্ট্যাটাসহীন অ্যারে ব্যবহার করছি এবং আমরা এটিকে স্ট্যাক হিসাবে ব্যবহার করতে সীমাবদ্ধ করছি না। এটি একটি অনিরাপদ পদ্ধতি (আপনি কেন তা দেখতে পাবেন)। দ্রষ্টব্যগুলির শুরুতে আমরা কীভাবে আইটেমগুলি যুক্ত করব তা লক্ষ্য করুন (মূলত আনশিফ্ট), প্রতিটিটির জন্য মান<input> স্থানে থাকে। কেন? কারণ keyপ্রতিটি আইটেম স্বতন্ত্রভাবে সনাক্ত করে না।
অন্য কথায়, প্রথমে Item 1আছে key={0}। যখন আমরা দ্বিতীয় আইটেমটি যুক্ত করি, শীর্ষ আইটেমটি দ্বিতীয় আইটেম হিসাবে Item 2অনুসরণ করে Item 1। যাইহোক, এখন Item 1হয়েছে key={1}এবং key={0}আর। পরিবর্তে,Item 2 এখন আছে key={0}!!
যেমন, প্রতিক্রিয়া মনে করে <input>উপাদানগুলি পরিবর্তন হয়নি, কারণItem কী সহ 0সর্বদা শীর্ষে থাকে!
সুতরাং কেন এই পদ্ধতির হয় কখনও কখনও খারাপ হয়?
এই অ্যারেটি কেবল ঝুঁকিপূর্ণ যদি অ্যারেটি কোনওভাবে ফিল্টার করা, পুনরায় সাজানো বা আইটেমগুলি যুক্ত / সরানো হয়। যদি এটি সর্বদা স্থির থাকে, তবে এটি ব্যবহার করা পুরোপুরি নিরাপদ। উদাহরণস্বরূপ, একটি নেভিগেশন মেনু পছন্দ করে["Home", "Products", "Contact us"] নিরাপদে এই পদ্ধতিটি দিয়ে পুনরাবৃত্তি করা যেতে পারে কারণ আপনি সম্ভবত নতুন লিঙ্কগুলি যুক্ত করবেন না বা এগুলি পুনরায় সাজবেন না।
সংক্ষেপে, আপনি যখন নিরাপদে সূচকটি নিরাপদে ব্যবহার করতে পারেন তা এখানে key:
- অ্যারে স্থির এবং কখনও পরিবর্তন হবে না।
- অ্যারে কখনও ফিল্টার হয় না (অ্যারের একটি উপসেট প্রদর্শন করুন)।
- অ্যারে কখনই পুনরায় অর্ডার হয় না।
- অ্যারে স্ট্যাক বা LIFO (সর্বশেষে, প্রথম আউট) হিসাবে ব্যবহৃত হয়। অন্য কথায়, যোগ করা কেবলমাত্র অ্যারের শেষে (অর্থাত্ ধাক্কা) দিয়ে করা যায় এবং কেবল সর্বশেষ আইটেমটি কখনই সরানো যায় (অর্থাত পপ)।
যদি আমরা পরিবর্তে উপরের স্নিপেটে যোগ করা আইটেমটিকে অ্যারের শেষের দিকে ঠেলা দিয়ে থাকি তবে প্রতিটি বিদ্যমান আইটেমের ক্রমটি সর্বদা সঠিক হত।
খুব খারাপ
<tbody>
{rows.map((row) => {
return <ObjectRow key={Math.random()} />;
})}
</tbody>
যদিও এই পদ্ধতিটি সম্ভবত কীগুলির স্বতন্ত্রতার গ্যারান্টি দিবে, এটি সর্বদা তালিকার প্রতিটি আইটেমকে পুনরায় রেন্ডার করতে প্রতিক্রিয়া জোর করবে , এমনকি এটির প্রয়োজন নেই। এটি খুব খারাপ সমাধান কারণ এটি কার্যক্ষমতাকে ব্যাপকভাবে প্রভাবিত করে। এটি উল্লেখ করার দরকার নেই যে Math.random()একই ইভেন্টে দু'বার একই সংখ্যার উত্থাপনের ক্ষেত্রে কোনও মূল সংঘর্ষের সম্ভাবনা বাদ দিতে পারে না ।
অস্থির কীগুলি (যেমন উত্পাদিতগুলির মতো Math.random()) অনেকগুলি উপাদান দৃষ্টান্ত এবং ডোম নোডগুলি অহেতুক পুনরায় তৈরি করার কারণ ঘটায় যা সন্তানের উপাদানগুলিতে কর্মক্ষমতা হ্রাস এবং হারাতে পারে।
খুব ভালো
<tbody>
{rows.map((row) => {
return <ObjectRow key={row.uniqueId} />;
})}
</tbody>
এটি যুক্তিযুক্ত সেরা পদ্ধতির কারণ এটি এমন একটি সম্পত্তি ব্যবহার করে যা ডেটাসেটের প্রতিটি আইটেমের জন্য স্বতন্ত্র। উদাহরণস্বরূপ, যদি rowsকোনও ডাটাবেস থেকে প্রাপ্ত ডেটা থাকে তবে যে কোনওটিতে টেবিলের প্রাথমিক কী ( যা সাধারণত একটি স্বতঃবৃদ্ধিযোগ্য নম্বর ) ব্যবহার করতে পারে ।
কী বাছাই করার সর্বোত্তম উপায় হ'ল একটি স্ট্রিং ব্যবহার করা যা তার ভাইবোনদের মধ্যে একটি তালিকা আইটেমটি অনন্যভাবে চিহ্নিত করে। প্রায়শই আপনি কী হিসাবে আপনার ডেটা থেকে আইডি ব্যবহার করবেন
ভাল
componentWillMount() {
let rows = this.props.rows.map(item => {
return {uid: SomeLibrary.generateUniqueID(), value: item};
});
}
...
<tbody>
{rows.map((row) => {
return <ObjectRow key={row.uid} />;
})}
</tbody>
এটিও একটি ভাল পদ্ধতির। যদি আপনার ডেটাসেটে কোনও ডেটা না থাকে যা স্বতন্ত্রতার গ্যারান্টি দেয় ( উদাহরণস্বরূপ স্বেচ্ছাসেবী সংখ্যার একটি অ্যারে ), একটি মূল সংঘর্ষের সম্ভাবনা রয়েছে। এই জাতীয় ক্ষেত্রে, ডেটাসেটে প্রতিটি আইটেমটি পুনরুক্ত করার আগে ম্যানুয়ালি এক অনন্য শনাক্তকারী তৈরি করা ভাল best সাধারণত উপাদানটি মাউন্ট করার সময় বা যখন ডেটাসেটটি গ্রহণ করা হয় ( যেমন propsকোনও এসিঙ্ক এপিআই কল থেকে বা তা থেকে ), কেবল একবার এটি করার জন্য , এবং প্রতিটি সময় উপাদান পুনরায় রেন্ডার করে না। ইতিমধ্যে বেশ কয়েকটি গ্রন্থাগার রয়েছে যা আপনাকে এই জাতীয় কী সরবরাহ করতে পারে। এখানে একটি উদাহরণ: প্রতিক্রিয়া-কী-সূচক ।
keyসম্পত্তি থাকা উচিত । এটি ReactJS কে উপযুক্ত ডিওএম নোডের জন্য রেফারেন্সগুলি খুঁজে পেতে এবং মার্ক-আপের ভিতরে কেবলমাত্র সামগ্রী আপডেট করতে সহায়তা করবে তবে পুরো টেবিল / সারিটিকে পুনরায় রেন্ডার করবে না।