কম্পোজিশনের সাথে কীভাবে ড্রিলিং প্রোপেলারগুলি এড়ানো যায়

আনস্প্ল্যাশ-এ কাঁচপিক্সেল দ্বারা ছবি

React.js হ'ল অন্যতম জনপ্রিয় ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক। এটি একটি ঘোষণামূলক এপিআই সহ একটি দুর্দান্ত উপাদান-ভিত্তিক কাঠামো যা বিকাশকারীকে সময়ের পরিবর্তে ইউআইটিকে স্থিতি এবং প্রপসের ফাংশন হিসাবে দেখতে দেয়। অন্য কথায়, আপনি পাস করা ডেটার ভিত্তিতে আপনার উপাদানটির উপস্থিতি বর্ণনা করতে পারেন।

ডেটা প্রাথমিকভাবে প্রপসের মাধ্যমে দেওয়া হয়। সোজা কথায়, প্রপস হ'ল জেএসএক্সের ফাংশনগুলির পক্ষে যুক্তি argu আসলে কোনও উপাদানটির সহজতম রূপটি এটি: একটি জাভাস্ক্রিপ্ট ফাংশন।

কনট হেডার = প্রপস => {রিটার্ন ( {props.title ); }

প্রপস একই উপাদানটিতে একাধিক জিনিসের জন্য ব্যবহার করা যেতে পারে। উপরের উদাহরণে, আমরা এটি একটি CSS ক্লাস কনফিগার করতে ব্যবহার করব: গা :় বা হালকা। এটি হেডার ট্যাগ ডেটা সরবরাহ করতেও ব্যবহৃত হয়। এরপরে আমরা আমাদের জেএসএক্সের বৈশিষ্ট্য হিসাবে প্রপসটি নিম্নরূপে পাস করে উপাদানটি ব্যবহার করতে পারি:

কনট অ্যাপ = প্রপস => {রিটার্ন ( ); }

আপনি দেখতে পাচ্ছেন, প্রপসগুলি খুব শক্তিশালী হতে পারে। তবে, যদি ভুলভাবে প্রয়োগ করা হয় তবে তাদের মোকাবেলা করা খুব কঠিন হতে পারে। প্রপসের বৃহত্তম "নো-না" এর মধ্যে একটি হ'ল "প্রোপ ড্রিলিং" নামে পরিচিত। প্রপস ড্রিলিং ঘটে যখন কোনও শিশুকে প্রপস প্রদান করার একমাত্র উদ্দেশ্যে দেওয়া হয়।

কনস্ট প্যারেন্ট = ({শ্রেণীর নাম, শিরোনাম}) => {রিটার্ন ( {... ); }

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

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

কনস্ট হিরো = ({শিরোনাম, উপশিরোনাম, ctas}) => {রিটার্ন (

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

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

কনট অ্যাকশনবটন্স = ({ক্রিয়া}) => {রিটার্ন ( । ক্রিয়াকলাপ.ম্যাপ (ক্রিয়া => )} ); }
কনস্ট হিরো = ({শিরোনাম, উপশিরোনাম, ctas}) => {রিটার্ন (

আপনি কি ঘটেছে দেখতে? আমি প্রথমে খেয়ালও করিনি। আমার ঠিক যে অংশটি প্রয়োজন ছিল তা পুনরায় তৈরি করা এত সহজ ছিল যে আমি বুঝতে পারি নি যে আমি নিজের জন্য একটি ড্রিলিং পরিস্থিতি তৈরি করেছি। আমি হিরো উপাদানটিতে একটি সিটিএএস প্রপস পাস করেছি, তারপরে এটি উল্টিয়ে অন্য একটি উপাদানকে দিয়েছি। এটি পরে আমাকে কিছুটা বড় মাথা ব্যাথা দিতে পারে এবং আমি চেষ্টা করেছিলাম কোড পুনরায় ব্যবহারের সুবিধা নেওয়া।

ভাগ্যক্রমে, আমি নিজেকে ধরে ফেলেছি এবং কোডটি এর মতো সংশোধন করেছি:

কনস্ট হিরো = ({শিরোনাম, উপশিরোনাম, শিশু}) => {ফিরে (

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

শিশু হিসাবে উপাদানগুলির পাস করার প্যাটার্নটিকে "রচনা" বলা হয়। এটি একটি শক্তিশালী নিদর্শন যা উপাদান ডিকোপলিং এবং কোড পুনরায় ব্যবহারের অনুমতি দেয়। আপনি যদি রচনা এবং এটি কীভাবে ব্যবহার করতে চান সে সম্পর্কে আরও জানতে চান, আমরা রচনা এবং উত্তরাধিকার বিষয়ে রিএ্যাক্টের প্রবেশ পৃষ্ঠাটি পরীক্ষা করে দেখার পরামর্শ দিই।

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