اگر آپ کچھ عرصے سے React کے ساتھ کام کر رہے ہیں، تو شاید آپ کا سامنا ہو گا۔ کنٹینر اور پیش کرنے والے اجزاء ، یا سمارٹ اور گونگے اجزاء۔ یہ شرائط a کی وضاحت کرتی ہیں۔ رحجان جو رد عمل کے اجزاء کی UI پرت کو منطق سے تقسیم کرتا ہے۔
UI کو کاروباری منطق سے الگ کرنا رد عمل کے لیے کوئی انوکھی بات نہیں ہے: خدشات کو الگ کرنا ایک ڈیزائن اصول ہے جس میں پہلے ہی 70 کی دہائی کے آس پاس ہے۔. مثال کے طور پر، بیک اینڈ پر کاروباری منطق سے ڈیٹا بیس تک رسائی حاصل کرنے والے کوڈ کو الگ کرنا ایک عام عمل ہے۔
لہٰذا React میں، ہم نے اس مسئلے کو کنٹینر کے اجزاء بنا کر حل کیا جس میں تمام منطق موجود ہے، جو ڈیٹا کو پراپس کے ذریعے پریزنٹیشنل جزو میں منتقل کر دے گا۔
React ہکس کے تعارف کے ساتھ، اس کے لیے ایک نیا طریقہ ہے: استعمال کرنا اپنی مرضی کے ہکس.
ہم منطق کو جزو سے الگ کیوں کریں؟
اس سے پہلے کہ ہم اپنے رد عمل کے اجزاء سے منطق کو الگ کرنا شروع کریں، ہمیں معلوم ہونا چاہیے کہ کیوں۔
اپنے کوڈ کو اس طرح ترتیب دینا جہاں ہر فنکشن یا جزو صرف ایک چیز کے لیے ذمہ دار ہو اس کا فائدہ یہ ہے کہ یہ بہت کچھ ہے۔ تبدیل کرنے اور برقرار رکھنے کے لئے آسان (ڈیو اور اینڈریو اسے کہتے ہیں "orthogonality"ان کی کتاب میں عملی پروگرامر).
اسے React پر لاگو کرنے کا مطلب ہے کہ ہمارا جزو صاف اور زیادہ منظم نظر آئے گا۔ مثال کے طور پر، ہمیں UI میں ترمیم کرنے سے پہلے منطق کی دیوار سے گزرنے کی ضرورت نہیں ہوگی۔
اپنے کوڈ کو اس طرح ترتیب دینے سے نہ صرف یہ بہتر نظر آتا ہے اور نیویگیٹ کرنا آسان ہے، بلکہ یہ تبدیل کرنا بھی آسان بناتا ہے کیونکہ ہک کو تبدیل کرنے سے UI اور اس کے برعکس اثر نہیں پڑتا ہے۔
ٹیسٹنگ بھی زیادہ قابل رسائی ہے: اگر ہم چاہیں تو ہم UI سے الگ الگ منطق کی جانچ کر سکتے ہیں۔ تاہم، میرے لیے سب سے اہم فائدہ یہ ہے کہ یہ طریقہ میرے کوڈ کو کیسے منظم کرتا ہے۔
رد عمل ہکس کے ساتھ منطق کو کیسے دوگنا کریں۔
اپنے اجزاء سے منطق کو دوگنا کرنے کے لیے، ہم سب سے پہلے اپنی مرضی کے مطابق ہک بنائیں گے۔
آئیے اس جزو کو بطور مثال لیتے ہیں۔ یہ بیس نمبر اور ایکسپوننٹ کی کفایتی قدر کا حساب لگاتا ہے:
آپ مکمل سورس کوڈ تلاش کر سکتے ہیں۔ یہاں.
کوڈ مندرجہ ذیل کی طرح لگتا ہے:
export const ExponentCalculator = () => {
const [base, setBase] = useState(4);
const [exponent, setExponent] = useState(4);
const result = (base ** exponent).toFixed(2);
const handleBaseChange = (e) => {
e.preventDefault();
setBase(e.target.value);
};
const handleExponentChange = (e) => {
e.preventDefault();
setExponent(e.target.value);
};
return (
<div className="blue-wrapper">
<input
type="number"
className="base"
onChange={handleBaseChange}
placeholder="Base"
value={base}
/>
<input
type="number"
className="exponent"
onChange={handleExponentChange}
placeholder="Exp."
value={exponent}
/>
<h1 className="result">{result}</h1>
</div>
);
};
یہ پہلے سے ہی ٹھیک لگ سکتا ہے، لیکن اس ٹیوٹوریل کی خاطر، بس تصور کہ یہاں زیادہ منطق ہے۔
پہلے قدم کے طور پر، ہم کریں گے۔ منطق کو اپنی مرضی کے مطابق ہک میں منتقل کریں۔ اور اسے ہمارے اجزاء کے اندر کال کریں۔
const useExponentCalculator = () => {
const [base, setBase] = useState(4);
const [exponent, setExponent] = useState(4);
const result = (base ** exponent).toFixed(2);
const handleBaseChange = (e) => {
e.preventDefault();
setBase(e.target.value);
};
const handleExponentChange = (e) => {
e.preventDefault();
setExponent(e.target.value);
};
return {
base,
exponent,
result,
handleBaseChange,
handleExponentChange,
};
};
export const ExponentCalculator = () => {
const {
base,
exponent,
result,
handleExponentChange,
handleBaseChange,
} = useExponentCalculator();
// ...
};
ہم اس ہک کو a میں منتقل کر سکتے ہیں۔ علیحدہ فائل خدشات کی زیادہ نمایاں علیحدگی کے لیے۔
مزید برآں، ہم اپنے ہک کو مزید چھوٹے، دوبارہ قابل استعمال افعال میں الگ کر سکتے ہیں۔ اس صورت میں، ہم صرف نکال سکتے ہیں calculateExponent.
ExponentCalculator.js استعمال کریں۔
const calculateExponent = (base, exponent) => base ** exponent;
const useExponentCalculator = () => {
const [base, setBase] = useState(4);
const [exponent, setExponent] = useState(4);
const result = calculateExponent(base, exponent).toFixed(2);
// ...
};
ان افعال کی جانچ پہلی مثال سے پورے جزو کے کوڈ کو جانچنے سے کہیں زیادہ آسان ہے۔ ہم کسی بھی Node.js ٹیسٹنگ لائبریری کے ساتھ ان کی جانچ کر سکتے ہیں، جسے React اجزاء کو سپورٹ کرنے کی بھی ضرورت نہیں ہے۔
اب ہمارے پاس جزو اور ہک کے کوڈ میں ہمارا فریم ورک مخصوص کوڈ (رد عمل) ہے، جبکہ ہماری کاروباری منطق مختلف فنکشنز میں رہتی ہے جن کی وضاحت ہم نے بعد میں کی تھی (جو فریم ورک ایگنوسٹک ہیں)۔
بہترین طریقوں
نام
میں اپنے کسٹم ہکس کا نام جزو کے بعد کے طور پر رکھنا چاہتا ہوں۔ use اور اجزاء کا نام (مثال کے طور پر useExponentCalculator)۔ میں پھر فون کرتا ہوں۔ ایک ہی فائل کریں ہک کے طور پر.
ہو سکتا ہے آپ ایک مختلف نام دینے کے کنونشن پر عمل کرنا چاہیں، لیکن میں تجویز کرتا ہوں۔ مسلسل رہنا آپ کے منصوبے میں.
اگر میں حسب ضرورت ہک کے کچھ حصوں کو دوبارہ استعمال کر سکتا ہوں، تو میں اسے عام طور پر کسی اور فائل میں منتقل کرتا ہوں۔ src/hooks.
اس سے زیادہ نہ کریں
عملی بننے کی کوشش کریں۔ اگر کسی جزو میں JS کی صرف چند لائنیں ہیں، تو منطق کو الگ کرنا ضروری نہیں ہے۔
CSS-in-JS
اگر آپ CSS-in-JS لائبریری استعمال کر رہے ہیں (useStyles)، آپ اس کوڈ کو دوسری فائل میں بھی منتقل کرنا چاہتے ہیں۔
آپ اسے اسی فائل میں منتقل کر سکتے ہیں جیسے ہک۔ تاہم، میں اسے ایک ہی فائل میں جزو کے اوپر رکھنے کو ترجیح دیتا ہوں یا اگر یہ بہت بڑا ہوتا ہے تو اسے اپنی فائل میں منتقل کرتا ہوں۔
نتیجہ
چاہے آپ کو لگتا ہے کہ حسب ضرورت ہکس کا استعمال آپ کے کوڈ کو بہتر بناتا ہے یا نہیں، آخر میں، یہ ذاتی ترجیح پر آتا ہے۔ اگر آپ کے کوڈ بیس میں بہت زیادہ منطق شامل نہیں ہے، تو اس پیٹرن کے فوائد آپ کے لیے زیادہ متعلقہ نہیں ہوں گے۔
کسٹم ہکس ماڈیولرٹی بڑھانے کا صرف ایک طریقہ ہے۔ میں بھی انتہائی سفارش کروں گا۔ اجزاء اور افعال کو چھوٹے، دوبارہ قابل استعمال حصوں میں تقسیم کرنا جب ممکن ہو
اس موضوع پر زیادہ عمومی سطح پر بھی بحث کی گئی ہے۔ عملی پروگرامر. میں نے کتاب کے اپنے پسندیدہ عنوانات کا احاطہ کرنے والا ایک مضمون لکھا ہے، لہذا اگر اس میں آپ کی دلچسپی ہے، تو یقینی بنائیں اسے چیک کریں.
