جيڪڏهن توهان هڪ React ڊولپر آهيو جنهن اڃا تائين React hooks بابت نه سکيو آهي، هاڻي اهو وقت آهي. هي پوسٽ استعمال ڪندي اثر رد عمل ٿلهو تفصيل سان. اهو هڪ سوئس آرمي چاقو جي ٿلهو برابر آهي. اهو ڪيترن ئي مسئلن کي حل ڪري ٿو، جهڙوڪ ڊيٽا ڪيئن حاصل ڪجي جڏهن هڪ جزو ماؤنٽ ٿئي، ڪوڊ ڪيئن هلجي جڏهن هڪ رياست يا پروپ تبديل ٿئي، ٽائمر يا وقفو ڪيئن سيٽ ڪجي، وغيره.
هڪ استعمال جو اثر استعمال ڪيو ويندو آهي تمام گهڻو ڪجهه لاءِ جيڪو توهان ڪرڻ چاهيو ٿا ”ڪرڻ“ هڪ React جزو ۾ جيڪو واپس نه پيو اچي JSX (ڪنهن به قسم جو ضمني اثر). توھان وٽ پڻ ٿي سگھي ٿو ڪيترائي استعمال اثرات في جزو.
هي سڀ طاقت هڪ قيمت تي اچي ٿو: جيستائين توهان سمجھندا آهيو ته اهو ڪيئن ڪم ڪري ٿو، اهو حيران ٿي سگهي ٿو. هن پوسٽ ۾، اسان مختلف مثالن تي نظر ڪنداسين ته جيئن توهان تصوراتي ماڊل کي سمجهي سگهو ٿا ۽ ان کي پنهنجي ڪوڊ تي لاڳو ڪري سگهو ٿا.
ري ايڪز - اهو ڇا حل ڪرڻ جي ڪوشش ڪري رهيو آهي؟
ٿلها پهريون ڀيرو React ورزن 16.8 ۾ متعارف ڪرايا ويا هئا ۽ هاڻي استعمال ڪيا ويا آهن ڪيترن ئي React منصوبن پاران. ٿلهو اجزاء جي وچ ۾ ڪوڊ جي ورهاڱي جي مسئلي کي ختم ڪري ٿو. اهي طبقن جي استعمال کان سواء لکيا ويا آهن. هن جو مطلب اهو ناهي ته رد عمل طبقن کي ڇڏي رهيو آهي؛ ٿلهو صرف هڪ متبادل طريقو آهي.
رد عمل توهان کي اجازت ڏئي ٿو ته جلدي نفيس اجزاء ٺاهي رياستي منطق سان. انهن حصن کي الڳ ڪرڻ ڏکيو آهي ڇو ته طبقو React Lifecycle طريقن تي ڀاڙي ٿو. اهو آهي جتي رد عمل ٿلهو اچي ٿو.
اهي توهان کي اجازت ڏين ٿا ته هڪ جزو کي ننڍن ڪمن ۾ ورهائي. لائف سائيڪل طريقن جي بنياد تي ڪوڊ کي ننڍڙن ٽڪرن ۾ ورهائڻ بدران، توھان ھاڻي ترتيب ڏئي سگھوٿا ۽ ڪوڊ کي الڳ ڪري ننڍن يونٽن ۾ ڪارڪردگيءَ جي بنياد تي.
Effect Hook استعمال ڪرڻ ڇا آهي؟
ٿلها ڪم آهن جيڪي توهان کي ES6 ڪلاس لکڻ جي بغير رياست ۽ ٻين رد عمل جي صلاحيتن تائين رسائي جي اجازت ڏين ٿا. react hooks API وٽ هڪ ٿلهو آهي جنهن کي useEffect سڏيو ويندو آهي. جيڪڏهن توهان واقف آهيو رد عمل واري زندگي جي چڪر سان، استعمال جو اثر ٿلهو ساڳيو آهي جزوي ڊيڊ ماؤنٽ, جزوي ڊيڊ اپ ڊيٽ، ۽ جزوي وِل نمبر زندگي جي چڪر جا طريقا گڏيل.
React Hooks دستاويزن جي مطابق، اهو ES6 ڪلاس جزو جي زندگي جي چڪر طريقن سان ڪجهه مسئلن کي حل ڪرڻ لاء ٺهيل هو.
ڪنٽرڪس
پهريون دليل هڪ ڪال بڪ فنڪشن آهي، جيڪو هر رينجر کان پوء ڊفالٽ طور تي عمل ڪيو ويندو آهي. ٻيو پيٽرولر هڪ اختياري انحصار صف آهي جيڪو ٿلهي کي هدايت ڪري ٿو ڪال بڪ ڪرڻ لاءِ صرف ان صورت ۾ جڏهن ٽارگيٽ اسٽيٽ تبديل ٿئي.
ٿلهو هر انحصار جي تاريخي ۽ موجوده رياستن جو مقابلو ڪري ٿو. جيڪڏهن ٻه قيمتون نه ملنديون آهن، ٿلهو ڪال بڪ کي سڏيندو آهي جيڪو پهريون پيٽرولر ۾ بيان ڪيو ويو آهي. انحصار صفن کي تبديل ڪري ٿو معمول جي ڪال بڪ جي رويي کي ۽ ضمانت ڏئي ٿو ته ٿلهو اجزاء جي دائري ۾ ٻين سڀني اجزاء کي نظر انداز ڪري ٿو.
بنيادي استعمال
پيغام محفوظ ڪرڻ لاءِ، مان استعمال ڪري رهيو آهيان React useState مٿي ڏنل ڪوڊ نموني ۾. ان کان پوء، مان پنھنجي پيغام واري رياست کي تبديل ڪريان ٿو ۽ ان کي اسڪرين تي پرنٽ ڪريو. بهرحال، مان هاڻي استعمال ڪرڻ چاهيان ٿو اثر پيغام کي تبديل ڪرڻ لاء هڪ سيڪنڊ کان پوء جزو نصب ڪيو ويو آهي.
مون پنهنجو اثر استعمال اسٽيٽ لائن جي پويان داخل ڪيو آهي استعمال ڪرڻ واري اثر کي درآمد ڪرڻ کان پوءِ React فريم ورڪ مان. اثر استعمال ڪرڻ لاء پهريون پيٽرولر هڪ فنڪشن آهي. جڏهن هي فنڪشن هينڊلر تي عمل ڪيو ويندو، اهو توهان جي مهيا ڪيل ڪنهن به ضمني اثرات جو خيال رکندو. فنڪشن هڪ ڪال بيڪ فنڪشن آهي جنهن کي سڏيو ويندو آهي جڏهن رد عمل جزو لائف سائيڪل واقعن مان هڪ ٿئي ٿي.
ڪڏهن استعمال ڪجي؟
استعمال جو اثر ٿلهو مختلف حالتن ۾ ڪارائتو ٿي سگھي ٿو. هيٺيان سڀ کان اهم آهن:
- اسان هن پيٽرولر کي ڪلائنٽ جي پاسي کان تبديل ڪري سگھون ٿا جڏهن اسان مهيا ڪيل دليل جي بنياد تي ڊيٽا حاصل ڪرڻ چاهيون ٿا. اهو ياد ڪيو ويندو بعد ۾ پيٽرول تازه ڪاري ڊيٽا سان اپڊيٽ ڪيو ويو آهي.
- جيڪڏهن اسان چاهيون ٿا ڊيٽا کي ٻيهر حاصل ڪرڻ لاءِ API جي آخري پوائنٽ مان ۽ ان کي ڏيکاريون ڪلائنٽ پاسي. جڏهن اسان جو جزو رينڊر ٿئي ٿو، استعمال ڪندڙ اثر ٿلهو کي ڏنل فنڪشن يا هينڊلر تي عمل ڪيو ويندو آهي، ۽ اجزاء رياستن ۾ ڊيٽا حاصل ڪئي ويندي آهي. اهي حالتون پوءِ استعمال ٿيل آهن يوزر انٽرفيس حصن ۾.
- جڏهن توهان جو حصو ٻاهرئين دنيا جي ڊيٽا تي ڀاڙي ٿو ۽ اسان يقين نه ٿا ڪري سگهون ته ڊيٽا اچي ويندي، اسان کي استعمال ڪرڻ گهرجي اثر (شايد سرور اتي هيٺ آهي). بلڪه مسئلن کي اڇلائڻ ۽ ٻين حصن کي ظاهر ٿيڻ کان روڪڻ کان، انهن کي استعمال ڪريو اثر ٿلهو ۾ رکو.
ڪيس استعمال ڪريو
جيڪڏهن جزو پهرين رن کان پوء ٻيهر رينڊر ڪندو، اهو عمل نه ڪندو.
جڏهن به هڪ جزو رينڊر يا ٻيهر رينڊر ڪري ٿو، اهو هميشه تي عمل ڪيو وڃي.
ڊفالٽ طور، پروگرام صرف هڪ ڀيرو هلندو آهي. ان کان پوء، جيڪڏهن پروپ قدر تبديل ٿي، هلائي:
هم وقت سازي جي سرگرمين لاء، هميشه استعمال ڪريو اثر استعمال ڪريو.
استعمال ڪريو اثر ڪوڊ بلاڪ توهان جي ساٿي ڊولپرز لاءِ غير مطابقت واري نوڪري جا واضح نشان آهن. اهو ممڪن آهي ته استعمال ڪرڻ کان سواءِ هم وقت سازي ڪوڊ ٺاهيو، پر اهو ”رد عمل جو طريقو“ ناهي، ۽ اهو ٻنهي جي پيچيدگي ۽ غلطين جو خطرو وڌائي ٿو.
استعمال ڪندي استعمال ڪرڻ بجاءِ ايڪيڪرونس ڪوڊ لکڻ جي بدران جيڪو UI کي روڪي سگھي ٿو ري ايڪٽ ڪميونٽي ۾ هڪ مشهور ٽيڪنڪ آهي، خاص طور تي جنهن طريقي سان ريڪٽ ٽيم ان کي بنايو آهي هڪ پاسي اثر ڪرڻ لاءِ.
ان کي استعمال ڪرڻ جو هڪ ٻيو فائدو اهو آهي ته ڊولپرز صرف ڪوڊ جو جائزو وٺي سگهن ٿا ۽ فوري طور تي ڪوڊ کي ڳولي سگھن ٿا جيڪو "ڪنٽرول جي وهڪري کان ٻاهر" هلائي ٿو، جيڪو صرف پهرين رينجر چڪر کان پوء اهم ٿي وڃي ٿو. ان کان علاوه، بلاڪ ٻيهر استعمال جي قابل ۽ اڃا به وڌيڪ سيمينٽڪ ڪسٽم ٿلهو ڪڍڻ لاء مناسب آهن.
هڪ مثال آهي
استعمال ڪندي اثر ڪوڊ استعمال ڪندي، هڪ نمبر في سيڪنڊ وڌايو.
ٿڪل
Effect Hook جي استعمال جي بنيادي اصولن ۽ بهترين طريقن کي سمجھڻ، منهنجي خيال ۾، سکڻ لاءِ هڪ نازڪ مهارت آهي جيڪڏهن توهان ٿيڻ چاهيو ٿا هڪ ايندڙ سطح جي React ڊولپر.
اختصار ڪرڻ لاءِ، UseEffect Hook هڪ فنڪشن حاصل ڪري ٿو جنهن ۾ لازمي، ممڪن طور تي اثر مڪمل منطق شامل آهي. انحصار صف، جيڪو ٻيو پيٽرولر آهي، عمل کي متاثر ڪرڻ لاء استعمال ڪري سگهجي ٿو. ان سان معاملو ڪرڻ دوران، اهو پڻ ضروري آهي ته ريٽرننگ فنڪشن استعمال ڪندي صفائي ڪوڊ لکڻ لاء.
اچو ته راين ۾ ڄاڻون ته مضمون مددگار هو.
جواب ڇڏي وڃو