اجزاء پر رد عمل ظاہر کریں

'رد عمل میں ، ہر چیز ایک جزو ہے'

اگر آپ ری ایکٹ سے واقف ہیں تو آپ نے یہ جملہ بہت بار سنا یا پڑھا ہوگا۔ لیکن کیا آپ جانتے ہیں کہ اس کا قطعی مطلب کیا ہے اور اسے کس طرح استعمال کیا جاتا ہے؟ اگر آپ ایسا نہیں کرتے ہیں تو ، پھر اس بلاگ کو ری ایکٹ کے اجزاء اور زندگی کے مختلف مرحلوں کے بارے میں جاننے کے لئے پڑھیں۔ مجھے یقین ہے کہ آپ کے ختم ہونے تک اس بلاگ کو پڑھنے سے آپ کو رد عمل کے اجزاء اور اس کے آس پاس کے تصورات کے بارے میں مکمل معلومات حاصل ہوگی۔ لیکن آگے بڑھنے سے پہلے ، جن عنوانات پر میں گفتگو کروں گا ، ان پر ایک سرسری نظر ڈالیں:

ابتدائیہ افراد کے لئے سیلز فورس ڈویلپر سبق

• رد عمل کے اجزاء کیا ہیں؟
• رد عمل کے اجزاء کے فوائد
• پروپس
• ریاستیں
• امریکہ بمقابلہ پروپس
• اجزاء حیاتیات کا رد عمل کریں

رد عمل کے اجزاء کیا ہیں؟

اس سے پہلے ڈویلپرز کو ایک سادہ صفحے کی ایپلی کیشن تیار کرنے کے لئے 1000 لائن کوڈ لکھنا پڑتا تھا۔ ان میں سے زیادہ تر ایپلی کیشنز نے روایتی DOM ڈھانچے کی پیروی کی تھی اور ان میں تبدیلیاں کرنا بہت مشکل تھا اور ڈویلپرز کے لئے پریشان کن کام تھا۔انہیں دستی طور پر عنصر تلاش کرنا پڑا جس میں تبدیلی کی ضرورت تھی اور اسی کے مطابق اسے اپ ڈیٹ کریں۔ یہاں تک کہ ایک چھوٹی سی غلطی بھی درخواست میں ناکامی کا باعث بنی۔ مزید یہ کہ ، DOM کو اپ ڈیٹ کرنا بہت مہنگا تھا۔ اس طرح ، جزو پر مبنی نقطہ نظر متعارف کرایا گیا تھا۔ اس نقطہ نظر میں ، پوری درخواست کو منطقی حصوں میں تقسیم کیا گیا ہے جس کو اجزاء کہا جاتا ہے۔ رد عمل ان فریم ورک میں سے ایک تھا جس نے اس نقطہ نظر کا انتخاب کیا۔اگر آپ ویب ڈویلپمنٹ میں اپنا کیریئر بنانے کا سوچ رہے ہیں تو ، ابتدائی شروعات آپ کے لئے بہت سارے مواقع کھول دے گی۔

آئیے اب سمجھیں کہ یہ اجزاء کیا ہیں۔

رد عمل کے اجزاء کو یوزر انٹرفیس کے بلڈنگ بلاکس کے طور پر سمجھا جاتا ہے۔ ان میں سے ہر ایک اجزاء ایک ہی جگہ کے اندر موجود ہیں لیکن ایک دوسرے سے آزادانہ طور پر عملدرآمد کرتے ہیں۔ رد عمل کے اجزاء کی اپنی ساخت ، طریقوں کے ساتھ ساتھ API بھی ہیں۔ وہ دوبارہ پریوست ہیں اور ضرورت کے مطابق انٹرفیس میں انجکشن لگائے جاسکتے ہیں۔ بہتر تفہیم کے ل To ، پورے UI کو درخت کی طرح سمجھیں۔یہاں ابتدائی جزو کی جڑ بن جاتی ہے اور آزاد ٹکڑوں میں سے ہر ایک شاخیں بن جاتی ہیں ، جو مزید ذیلی شاخوں میں تقسیم ہوتی ہیں۔

یہ ہمارے UI کو منظم رکھتا ہے اور اعداد و شمار اور ریاست کی تبدیلیوں کو منطقی طور پر جڑ سے شاخوں اور پھر ذیلی شاخوں میں بہنے دیتا ہے۔ اجزاء سرور کو براہ راست کلائنٹ سائیڈ سے کال کرتے ہیں جو صفحہ کو تازہ دم کئے بغیر ڈوم کو متحرک طور پر اپ ڈیٹ کرنے کی اجازت دیتا ہے۔ اس کی وجہ یہ ہے کہ رد عمل کے اجزاء AJAX درخواستوں کے تصور پر بنائے گئے ہیں۔ ہر جزو کا اپنا انٹرفیس ہوتا ہے جو سرور کو کال کرسکتا ہے اور اسے اپ ڈیٹ کرسکتا ہے۔ چونکہ یہ اجزا ایک دوسرے سے آزاد ہیں ، لہذا ہر ایک دوسرے یا مجموعی طور پر UI کو متاثر کیے بغیر تازہ دم کر سکتا ہے۔

ہم استعمال کرتے ہیں React.createClass () جزو بنانے کا طریقہ۔ اس طریقہ کار کو کسی شے کی دلیل کو منظور کرنا ہوگا جو رد عمل کے جز کی وضاحت کرے گا۔ ہر جزو میں بالکل ایک ہونا ضروری ہے (رینڈر) طریقہ یہ کسی جزو کی سب سے اہم ملکیت ہے جو جاوا اسکرپٹ ، جے ایس ایکس میں HTML کو پارس کرنے کے لئے ذمہ دار ہے۔ یہ (رینڈر) جزو کی HTML نمائندگی کو DOM نوڈ کے بطور واپس کردے گا۔ لہذا ، تمام ایچ ٹی ایم ایل ٹیگز کو لازمی طور پر کے اندر اندر بند ٹیگ میں منسلک کیا جانا چاہئے (رینڈر) .

جزو بنانے کے لئے نمونہ کوڈ درج ذیل ہے۔

درآمد 'رد عمل' سے کریں
آپ کی شناخت {this.state.id is ہے
)} act ReactDOM.render (، document.getElementById ('مواد'))

امریکہ بمقابلہ پروپس

اجزاء حیاتیات کا رد عمل کریں

رد عمل مختلف طریقوں کو مہی .ا کرتا ہے جو مطلع کرتے ہیں جب کسی اجزاء کی زندگی کے دور میں کوئی خاص مرحلہ ہوتا ہے۔ ان طریقوں کو حیاتیاتی طریقوں کہا جاتا ہے۔ زندگی بھر کے یہ طریقے زیادہ پیچیدہ نہیں ہیں۔ آپ ان طریقوں کے بارے میں سوچ سکتے ہیں بطور خصوصی ایونٹ ہینڈلر جو اجزاء کی زندگی کے دوران مختلف مقامات پر بلائے جاتے ہیں۔ یہاں تک کہ مختلف کاموں کو انجام دینے کے ل these آپ ان طریقوں میں اپنا کوڈ شامل کرسکتے ہیں۔ جزو کے لائف سائیکل کے بارے میں بات کرتے ہوئے ، لائف سائیکل کو 4 مراحل میں تقسیم کیا گیا ہے۔ وہ ہیں:

1. ابتدائی مرحلہ
2. مرحلہ اپ ڈیٹ کرنا
3. پروپس مرحلے کو تبدیل
4. غیر انحراف مرحلہ

ان میں سے ہر ایک مرحلے میں کچھ حیاتیاتی طریقوں پر مشتمل ہے جو صرف ان کے لئے مخصوص ہیں۔ تو آئیے اب یہ معلوم کریں کہ ان میں سے ہر ایک مرحلے کے دوران کیا ہوتا ہے۔

a. ابتدائی مرحلہ - کسی رد عمل کے جزو کے لائف سائیکل کا پہلا مرحلہ ابتدائی مرحلہ یا ابتدائی رینڈرینگ مرحلہ ہوتا ہے۔ اس مرحلے میں ،جزو اپنا سفر شروع کرنے والا ہے اور DOM تک جانے والا ہے۔ اس مرحلے میں مندرجہ ذیل طریقوں پر مشتمل ہے جو پہلے سے طے شدہ ترتیب میں شامل ہیں۔

1. getDefaultProp (): اس طریقہ کا استعمال پہلے سے طے شدہ قدر کی وضاحت کرنے کے لئے کیا جاتا ہے this.prop . اس سے پہلے کہ آپ کا جزو بننے سے پہلے ہی اس کو بلایا جاتا ہے یا والدین کی طرف سے کوئی سہارا اس میں داخل ہوجاتا ہے۔
2. getInitialState (): یہ طریقہ عادت ہےکی وضاحت کی پہلے سے طے شدہ قیمت this.state اس سے پہلے کہ آپ کا جز بن جائے۔
3. اجزاء وِل مائونٹ (): یہ آخری طریقہ ہے جسے آپ اپنے عنصر کو DOM میں شامل کرنے سے پہلے کال کرسکتے ہیں۔ لیکن اگر آپ کال کریں گے سیٹ اسٹیٹ () اس طریقہ کار کے اندر آپ کا جزو دوبارہ مہیا نہیں ہوگا۔
4. () پیش کریں: ویں طریقہ ایک سنگل ایچ ٹی ایم ایل نوڈ کو واپس کرنے کے لئے ذمہ دار ہے اور ہر ایک جز میں اس کی وضاحت ہونی چاہئے۔ آپ لوٹ سکتے ہیں خالی یا جھوٹا اگر آپ کچھ بھی نہیں دینا چاہتے ہیں تو.
5. اجزاء کی تاریخ (): ایک بار جب جز کو مہیا کیا جاتا ہے اور ڈوم پر رکھ دیا جاتا ہے تو ، یہ طریقہ کہا جاتا ہے۔ یہاں آپ کسی بھی ڈوم کو طلب کرنے کی کاروائیاں انجام دے سکتے ہیں۔

b. تازہ کاری کا مرحلہ - ایک بار جزو DOM میں شامل ہوجانے کے بعد ، وہ اس وقت اپ ڈیٹ اور دوبارہ پیش کر سکتے ہیں جب ریاست میں تبدیلی واقع ہو۔ جب بھی ریاست بدلتی ہے ، جزو اس کو کہتے ہیں (رینڈر) ایک بار پھر کوئی بھی جزو ، جو اس جزو کی پیداوار پر انحصار کرتا ہے اسے بھی بلائے گا (رینڈر) ایک بار پھر یہ کیا گیا ہے ، اس بات کا یقین کرنے کے لئے کہ ہمارا جزو خود کا تازہ ترین ورژن ڈسپلے کر رہا ہے۔ اس طرح اجزاء کو کامیابی کے ساتھ اپ ڈیٹ کرنے کے لئے مندرجہ ذیل طریقوں کو دیئے گئے ترتیب میں شامل کیا گیا ہے۔

1. shouldCompenderUpdate (): اس طریقہ کار کو استعمال کرنے سے آپ خود کو اپ ڈیٹ کرنے کے اپنے جزو کے طرز عمل کو کنٹرول کرسکتے ہیں۔ اگر آپ اس طریقہ کار سے حقیقی لوٹتے ہیں تو ،جزو کی تازہ کاری ہوگی۔ بصورت دیگر اگر یہ طریقہ واپس آجاتا ہےجھوٹا، جزو تازہ کاری کو چھوڑ دے گا۔
2. جزو ول اپٹ (): ٹیاس کا طریقہ کہا جاتا ہے jاس سے پہلے کہ آپ کے اجزاء کی تازہ کاری ہو جائے۔ اس طریقہ کار میں ، آپ کال کرکے اپنی جزو کی حالت تبدیل نہیں کرسکتے ہیں this.setState .
3. () پیش کریں: اگر آپ غلط راستے سے لوٹ رہے ہیں shouldCompenderUpdate () ، اندر کا کوڈ (رینڈر) اس بات کا یقین کرنے کے لئے دوبارہ آپ کو طلب کیا جائے گا کہ آپ کا جزو خود کو صحیح طریقے سے دکھائے گا۔
4. اجزاء ڈیڈ اپ ڈیٹ (): ایک بار جب اجزاء کو اپ ڈیٹ اور مہیا کیا گیا ہے ، تو اس وقت اس طریقہ کار کا مطالبہ کیا جاتا ہے۔ آپ کسی بھی کوڈ کو اس طریقہ کار کے اندر رکھ سکتے ہیں ، جس کو اجزاء کی تازہ کاری کے بعد آپ اس پر عملدرآمد کرنا چاہتے ہیں۔

c پروپس تبدیلی کا مرحلہ - کے بعد جزو کو DOM میں پیش کردیا گیا ہے ، ریاست کی تبدیلی کے علاوہ جزو کی تازہ ترین معلومات صرف اور صرف اس وقت ہوں گی جب اس کی سہارا دینے والی قیمت میں تبدیلی آجائے گی۔ عملی طور پر یہ مرحلہ پچھلے مرحلے کی طرح کام کرتا ہے ، لیکن ریاست کے بجائے ، یہ سہارے سے نمٹتا ہے۔ اس طرح ، اس مرحلے میں اپڈیٹنگ فیز سے صرف ایک اضافی طریقہ موجود ہے۔

1. اجزاء وِل ریسیپپراپس (): یہ طریقہ ایک دلیل واپس کرتا ہے جس میں نئی ​​سہارے کی قیمت ہوتی ہے جو جز کو تفویض کی جارہی ہے۔
   لائف سائیکل کے باقی طریقے ان طریقوں سے یکساں سلوک کرتے ہیں جو ہم نے گذشتہ مرحلے میں دیکھا تھا۔
   
2. shouldCompenderUpdate ()
3. جزو ول اپٹ ()
4. (رینڈر)
5. اجزاء ڈیڈ اپ ڈیٹ ()

d.غیر ماؤنٹین مرحلہ -یہ اجزاء کی زندگی کے چکر کا آخری مرحلہ ہے جس میں جزو کو DOM سے مکمل طور پر ختم اور ختم کردیا جاتا ہے۔ اس میں صرف ایک طریقہ ہے:

1. اجزاء وِل انماؤنٹ (): ایک بار جب یہ طریقہ کارآمد ہوجائے تو آپ کے جزو کو DOM سے مستقل طور پر ختم کردیا جائے گا۔اس طریقہ کار میں ، Yآپ کسی بھی صفائی سے متعلق کام انجام دے سکتے ہیں جیسے پروگرام سننے والوں کو ہٹانا ، ٹائمر رکنا وغیرہ۔

پورے زندگی سائیکل آریھ مندرجہ ذیل ہے:

اس سے ہمیں ری ایکٹ اجزاء پر بلاگ کے اختتام تک پہنچایا جاتا ہے۔ مجھے امید ہے کہ اس بلاگ میں میں واضح طور پر یہ بیان کرنے میں کامیاب رہا تھا کہ رد عمل کے اجزاء کیا ہیں ، وہ کس طرح استعمال ہوتے ہیں۔ آپ میرے بلاگ کا حوالہ دے سکتے ہیں ، اگر آپ ReactJS کے بارے میں مزید معلومات حاصل کرنا چاہتے ہیں تو۔

اگر آپ ری ایکٹ میں تربیت حاصل کرنا چاہتے ہیں اور خود ہی UI کی دلچسپی تیار کرنا چاہتے ہیں تو پھر چیک کریں ایڈوریکا کے ذریعہ ، ایک قابل اعتماد آن لائن سیکھنے والی کمپنی جس کی دنیا بھر میں 250،000 سے زیادہ مطمئن سیکھنے والوں کے نیٹ ورک ہیں۔

ہمارے لئے ایک سوال ہے؟ برائے کرم اس کا تذکرہ سیکشن میں ذکر کریں اور ہم آپ کو واپس ملیں گے۔