معرفی قلاب

قلاب ها یک افزودنی جدید در React 16. 8 هستند. آنها به شما امکان می دهند بدون نوشتن کلاس از حالت و سایر ویژگی های React استفاده کنید.

این کاربرد جدید کاربردی اولین "قلاب" است که ما در مورد آن یاد خواهیم گرفت ، اما این مثال فقط یک تیزر است. نگران نباشید اگر هنوز معنی ندارد!

می توانید یادگیری قلاب را در صفحه بعد شروع کنید. در این صفحه ، ما با توضیح اینکه چرا قلاب هایی را برای واکنش به شما اضافه می کنیم و چگونه می توانند به شما در نوشتن برنامه های عالی کمک کنیم ، ادامه خواهیم داد.

توجه داشته باشید

React 16. 8. 0 اولین نسخه ای است که از قلاب ها پشتیبانی می کند. هنگام به روزرسانی ، فراموش نکنید که تمام بسته ها ، از جمله React Dom را به روز کنید. React Native از زمان انتشار 0. 59 REACT Native از قلاب ها پشتیبانی کرده است.

در React Conf 2018 ، سوفی آلپرت و دن آبراموف قلاب هایی را معرفی کردند و پس از آن رایان فلورانس نشان داد که چگونه می تواند یک برنامه را برای استفاده از آنها بازپرداخت کند. فیلم را اینجا تماشا کنید:

بدون تغییر شکستن

قبل از ادامه ، توجه داشته باشید که قلاب ها عبارتند از:

• کاملاً انتخابمی توانید بدون بازنویسی کد موجود ، قلاب ها را در چند مؤلفه امتحان کنید. اما اگر نمی خواهید ، لازم نیست در حال حاضر قلاب را یاد بگیرید یا از آن استفاده کنید.
• 100 ٪ به عقب سازگار است. قلاب ها حاوی هیچ تغییر شکستگی نیستند.
• اکنون موجود است. قلاب ها اکنون با انتشار V16. 8. 0 در دسترس هستند.

هیچ برنامه ای برای حذف کلاس ها از React وجود ندارد. می توانید اطلاعات بیشتر در مورد استراتژی اتخاذ تدریجی قلاب ها را در قسمت پایین این صفحه بخوانید.

قلاب ها جایگزین دانش شما در مورد مفاهیم React نمی شوند. در عوض ، قلاب ها یک API مستقیم تر به مفاهیم React که قبلاً می شناسید ، ارائه می دهد: غرفه ها ، حالت ، زمینه ، Refs و چرخه عمر. همانطور که بعداً نشان خواهیم داد ، قلاب ها همچنین یک روش قدرتمند جدید برای ترکیب آنها ارائه می دهند.

اگر فقط می خواهید یادگیری قلاب را شروع کنید ، احساس راحتی کنید که مستقیماً به صفحه بعد پرش کنید! همچنین می توانید خواندن این صفحه را ادامه دهید تا در مورد چرا ما قلاب ها را اضافه کنیم ، و اینکه چگونه می خواهیم بدون بازنویسی برنامه های خود ، استفاده از آنها را شروع کنیم.

قلاب ها طیف گسترده ای از مشکلات به ظاهر بدون ارتباط را در واکنش نشان می دهند که ما بیش از پنج سال از نوشتن و حفظ ده ها هزار مؤلفه با آن روبرو شده ایم. این که آیا شما Reach React را یاد می گیرید ، روزانه از آن استفاده می کنید ، یا حتی یک کتابخانه متفاوت را با یک مدل جزء مشابه ترجیح می دهید ، ممکن است برخی از این مشکلات را تشخیص دهید.

استفاده مجدد از منطق حالت بین مؤلفه ها دشوار است

React راهی برای "ضمیمه" رفتار قابل استفاده مجدد به یک مؤلفه ارائه نمی دهد (به عنوان مثال ، اتصال آن به یک فروشگاه). اگر مدتی با React کار کرده اید ، ممکن است با الگویی مانند غرفه های ارائه دهنده و اجزای مرتبه بالاتر که سعی در حل این موضوع دارند ، آشنا باشید. اما این الگوهای شما را ملزم می کند که هنگام استفاده از آنها ، اجزای خود را بازسازی کنید ، که می تواند دست و پا گیر باشد و کد را سخت تر کند. اگر به یک برنامه React معمولی در React Devtools نگاه کنید ، به احتمال زیاد "جهنم بسته بندی" از اجزای احاطه شده توسط لایه های ارائه دهندگان ، مصرف کنندگان ، اجزای مرتبه بالاتر ، غرفه های ارائه شده و سایر انتزاعات را پیدا خواهید کرد. در حالی که ما می توانیم آنها را در Devtools فیلتر کنیم ، این مسئله به یک مشکل اساسی عمیق تر اشاره می کند: React برای به اشتراک گذاشتن منطق دولتی به یک ابتدایی بهتر نیاز دارد.

با قلاب ، می توانید منطق حالت را از یک مؤلفه استخراج کنید تا بتواند به طور مستقل و مورد استفاده مجدد آزمایش شود. قلاب ها به شما امکان می دهند بدون تغییر سلسله مراتب مؤلفه خود از منطق حالت استفاده مجدد استفاده کنید. این امر به اشتراک گذاشتن قلاب ها در بین بسیاری از مؤلفه ها یا با جامعه آسان می شود.

ما در مورد ساخت قلاب های خود بیشتر در مورد این موضوع بحث خواهیم کرد.

درک اجزای پیچیده سخت می شود

ما غالباً مجبور شدیم مؤلفه هایی را حفظ کنیم که شروع به کار ساده می کنند اما به یک آشفتگی غیرقابل کنترل از منطق و عوارض جانبی تبدیل شده اند. هر روش چرخه عمر اغلب حاوی ترکیبی از منطق نامربوط است. به عنوان مثال ، مؤلفه ها ممکن است برخی از داده ها را در ComponentDidmount و ComponentDidupdate انجام دهند. با این حال ، همان روش ComponentDidmount ممکن است حاوی برخی منطق نامربوط باشد که شنوندگان رویداد را تنظیم می کند ، با پاکسازی در ComponentWillUnmount انجام می شود. کد مربوط به متقابل که با هم تغییر می کند از هم جدا می شود ، اما کد کاملاً نامربوط در یک روش واحد به پایان می رسد. این امر معرفی اشکالات و ناسازگاری ها را بسیار آسان می کند.

در بسیاری از موارد امکان شکستن این مؤلفه ها به موارد کوچکتر امکان پذیر نیست زیرا منطق حالت در همه جا وجود دارد. آزمایش آنها نیز دشوار است. این یکی از دلایلی است که بسیاری از افراد ترجیح می دهند با یک کتابخانه مدیریت دولت جداگانه واکنش نشان دهند. با این حال ، این اغلب انتزاع بیش از حد را معرفی می کند ، شما را ملزم به پرش بین پرونده های مختلف می کند و استفاده مجدد از مؤلفه ها را دشوارتر می کند.

برای حل این مسئله ، قلاب ها به شما امکان می دهند یک مؤلفه را بر اساس آنچه که قطعات مرتبط هستند (مانند تنظیم یک اشتراک یا واکشی داده ها) به جای مجبور کردن شکاف بر اساس روش های چرخه عمر ، به توابع کوچکتر تقسیم کنید. همچنین ممکن است شما از مدیریت وضعیت محلی مؤلفه با یک کاهش دهنده خودداری کنید تا آن را قابل پیش بینی تر کند.

ما در مورد استفاده از Hook Effect بیشتر در مورد این موضوع بحث خواهیم کرد.

کلاس ها هم مردم و هم ماشین ها را گیج می کنند

علاوه بر اینکه استفاده مجدد از کد و سازمان کد را دشوارتر می کند ، دریافتیم که کلاس ها می توانند یک مانع بزرگ برای یادگیری واکنش باشند. شما باید درک کنید که چگونه این کار در JavaScript انجام می شود ، که بسیار متفاوت از نحوه عملکرد آن در اکثر زبان ها است. شما باید به یاد داشته باشید که دستگیرندگان رویداد را به هم وصل کنید. بدون قسمت های کلاس عمومی ES2022 ، کد بسیار کلامی است. مردم می توانند غرفه ها ، ایالت ها و داده های از بالا به پایین را کاملاً خوب درک کنند اما هنوز هم با کلاس ها مبارزه می کنند. تمایز بین مؤلفه های عملکرد و کلاس در React و زمان استفاده از هر یک از آنها منجر به اختلاف نظرها حتی بین توسعه دهندگان با تجربه React می شود.

علاوه بر این ، React حدود پنج سال است که از بین رفته است ، و ما می خواهیم مطمئن شویم که در پنج سال آینده مرتبط است. همانطور که Svelte ، Angular ، Glimmer و دیگران نشان می دهند ، تدوین پیش رو از قطعات پتانسیل آینده زیادی دارد. به خصوص اگر محدود به الگوها نباشد. به تازگی ، ما با استفاده از Prepack در حال آزمایش تاشو مؤلفه هستیم و نتایج اولیه امیدوار کننده ای را مشاهده کرده ایم. با این حال ، ما دریافتیم که اجزای کلاس می توانند الگوهای غیر عمدی را تشویق کنند که باعث می شود این بهینه سازی ها به یک مسیر کندتر برگردند. کلاس ها موضوعاتی را برای ابزارهای امروز نیز ارائه می دهند. به عنوان مثال ، کلاس ها خیلی خوب کوچک نمی شوند ، و بارگیری مجدد داغ و غیرقابل اعتماد را انجام می دهند. ما می خواهیم یک API ارائه دهیم که باعث می شود کد در مسیر بهینه سازی باقی بماند.

برای حل این مشکلات ، قلاب ها به شما امکان می دهند از ویژگی های React و بدون کلاس استفاده بیشتری کنید. از نظر مفهومی ، مؤلفه های React همیشه به توابع نزدیکتر بوده اند. قلاب ها توابع را در آغوش می گیرند ، اما بدون قربانی کردن روح عملی واکنش. قلاب ها دسترسی به دریچه های فرار ضروری را فراهم می کنند و شما را ملزم به یادگیری تکنیک های پیچیده کاربردی یا واکنش پذیر نمی کند.

مثال ها

قلاب در یک نگاه مکان مناسبی برای شروع یادگیری قلاب است.

استراتژی اتخاذ تدریجی

TLDR: هیچ برنامه ای برای حذف کلاس ها از React وجود ندارد.

ما می دانیم که توسعه دهندگان React روی محصولات حمل و نقل متمرکز شده اند و وقت ندارند که به هر API جدیدی که منتشر می شود نگاه کنند. قلاب ها بسیار جدید هستند ، و بهتر است قبل از در نظر گرفتن یادگیری یا اتخاذ آنها ، منتظر نمونه ها و آموزش های بیشتر باشید.

ما همچنین می دانیم که نوار اضافه کردن یک بدوی جدید برای واکنش بسیار زیاد است. برای خوانندگان کنجکاو ، ما RFC مفصلی را تهیه کرده ایم که با جزئیات بیشتر به انگیزه فرو می رود و دیدگاه دیگری در مورد تصمیمات خاص طراحی و هنر قبلی مرتبط ارائه می دهد.

از نظر مهم ، قلاب ها در کنار هم با کد موجود کار می کنند تا بتوانید آنها را به تدریج اتخاذ کنید. هیچ عجله ای برای مهاجرت به قلاب وجود ندارد. ما توصیه می کنیم از هرگونه "بازنویسی بزرگ" ، به ویژه برای اجزای کلاس پیچیده موجود جلوگیری کنید. برای شروع "تفکر در قلاب" کمی ذهن لازم است. در تجربه ما ، بهتر است ابتدا با استفاده از قلاب در اجزای جدید و غیر بحرانی تمرین کنید و اطمینان حاصل کنید که همه افراد در تیم شما با آنها احساس راحتی می کنند. بعد از اینکه قلاب را امتحان کردید ، لطفاً بازخورد ، مثبت یا منفی را برای ما ارسال کنید.

ما قصد داریم قلاب ها را برای پوشش کلیه موارد استفاده موجود برای کلاس ها پوشش دهیم ، اما ما برای آینده قابل پیش بینی از اجزای کلاس پشتیبانی خواهیم کرد. در فیس بوک ، ما ده ها هزار مؤلفه داریم که به عنوان کلاس نوشته شده اند و هیچ برنامه ای برای بازنویسی آنها نداریم. در عوض ، ما شروع به استفاده از قلاب در کد جدید در کنار هم با کلاس می کنیم.

سوالات متداول

ما یک صفحه سؤالات متداول قلاب تهیه کرده ایم که به رایج ترین سؤالات مربوط به قلاب پاسخ می دهد.

در پایان این صفحه ، شما باید ایده ای خشن از حل مشکلات قلاب داشته باشید ، اما احتمالاً بسیاری از جزئیات نامشخص است. نگران نباشید! بیایید اکنون به صفحه بعدی برویم که به عنوان مثال شروع به یادگیری قلاب ها می کنیم.