سؤالات متداول قلاب

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

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

کدام نسخه از React شامل قلاب است؟

با شروع 16. 8. 0 ، React شامل اجرای پایدار قلاب های React برای:

• واکنش نشان می دهد
• واکنش بومی
• React Server
• رندر تست واکنش
• رندر کم عمق واکنش نشان می دهد

توجه داشته باشید که برای فعال کردن قلاب ها ، تمام بسته های React باید 16. 8. 0 یا بالاتر باشند. اگر فراموش کنید که به روز کنید ، به عنوان مثال ، React Dom را فراموش کنید ، قلاب ها کار نمی کنند.

React Native 0. 59 و بالاتر از قلاب های پشتیبانی.

آیا باید تمام مؤلفه های کلاس خود را بازنویسی کنم؟

نه. هیچ برنامه ای برای حذف کلاس ها از React وجود ندارد - همه ما باید محصولات حمل و نقل را حفظ کنیم و نتوانیم بازنویسی کنیم. توصیه می کنیم قلاب ها را در کد جدید امتحان کنید.

چه کاری می توانم با قلاب هایی که نمی توانم با کلاس ها انجام دهم چه کاری انجام دهم؟

قلاب ها یک روش جدید قدرتمند و بیانگر برای استفاده مجدد از عملکرد بین مؤلفه ها ارائه می دهند."ساختن قلاب های خود" نگاهی اجمالی به آنچه ممکن است ارائه می دهد. این مقاله توسط یک عضو تیم React Core عمیق تر به قابلیت های جدید که توسط قلاب ها باز شده است ، عمیق تر می شود.

چه مقدار از دانش React من مرتبط است؟

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

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

آیا باید از قلاب ، کلاس یا ترکیبی از هر دو استفاده کنم؟

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

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

آیا قلاب ها تمام موارد استفاده را برای کلاس ها پوشش می دهند؟

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

آیا قلاب ها جایگزین غرفه های رندر و اجزای مرتبه بالاتر می شوند؟

غالباً ، غرفه ها و اجزای مرتبه بالاتر فقط یک کودک مجرد را ارائه می دهند. ما فکر می کنیم قلاب ها راهی ساده تر برای ارائه این مورد استفاده هستند. هنوز مکانی برای هر دو الگوی وجود دارد (به عنوان مثال ، یک جزء پیمایشگر مجازی ممکن است دارای یک RenderItem باشد ، یا یک جزء ظروف بصری ممکن است ساختار DOM خاص خود را داشته باشد). اما در بیشتر موارد ، قلاب ها کافی خواهند بود و می توانند به کاهش لانه سازی در درخت شما کمک کنند.

قلاب ها برای API های محبوب مانند Redux Connect () و React Router چه معنی دارند؟

شما می توانید از همان API های مشابه همیشه استفاده کنید. آنها به کار خود ادامه خواهند داد.

React Redux از آنجا که V7. 1. 0 از API Hooks پشتیبانی می کند و قلاب هایی مانند استفاده شده یا استفاده از Elector را در معرض دید قرار می دهد.

REACT روتر از V5. 1 از قلاب ها پشتیبانی می کند.

سایر کتابخانه ها ممکن است در آینده از قلاب ها نیز پشتیبانی کنند.

آیا قلاب ها با تایپ استاتیک کار می کنند؟

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

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

چگونه می توان مؤلفه هایی را که از قلاب استفاده می کنند آزمایش کنیم؟

از نظر React ، یک مؤلفه با استفاده از قلاب ها فقط یک مؤلفه معمولی است. اگر راه حل تست شما به Intact Inteals تکیه نمی کند ، آزمایش اجزای با قلاب نباید با نحوه آزمایش اجزای عادی متفاوت باشد.

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

دستور العمل های آزمایش شامل نمونه های بسیاری است که می توانید کپی و چسباندن آن را انجام دهید.

به عنوان مثال ، بیایید بگوییم که ما این مؤلفه پیشخوان را داریم:

ما آن را با استفاده از React Dom آزمایش خواهیم کرد. برای اطمینان از اینكه رفتار با آنچه در مرورگر اتفاق می افتد مطابقت دارد ، ما كد را ارائه می دهیم و آن را به روز می كنیم و در reacttestutils. act () تماس می گیریم:

تماس های عمل () همچنین اثرات موجود در آنها را کاهش می دهد.

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

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

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

قوانین LINT دقیقاً چه چیزی را اجرا می کند؟

ما یک افزونه ESLINT ارائه می دهیم که قوانین قلاب را برای جلوگیری از اشکالات اعمال می کند. فرض می کند که هر عملکردی که با "استفاده" و یک حرف بزرگ شروع می شود درست پس از قلاب است. ما می دانیم که این اکتشافی کامل نیست و ممکن است برخی از موارد مثبت کاذب وجود داشته باشد ، اما بدون کنوانسیون گسترده اکوسیستم ، هیچ راهی برای دستیابی به قلاب ها وجود ندارد-و نام های طولانی تر مردم را از تصویب قلاب یا پیروی از کنوانسیون دلسرد می کند.

به طور خاص ، این قانون آن را اجرا می کند:

• تماس به قلاب ها یا در داخل یک تابع pascalcase (فرض می شود که یک جزء است) یا یک عملکرد دیگر استفاده می شود (فرض می شود قلاب سفارشی است).
• قلاب ها به همان ترتیب در هر رندر خوانده می شوند.

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

از کلاس ها تا قلاب

روشهای چرخه عمر چگونه با قلاب مطابقت دارند؟

• سازنده: اجزای عملکرد نیازی به سازنده ندارند. شما می توانید دولت را در تماس با ماستاسیون آغاز کنید. اگر محاسبه حالت اولیه گران است ، می توانید یک تابع را برای استفاده از آن منتقل کنید.
• GetDeriredStateFromProps: به جای آن ، به روزرسانی را برنامه ریزی کنید.
• COSTCOMPONENTUPDATE: به React. memo در زیر مراجعه کنید.
• رندر: این خود بدن مؤلفه عملکرد است.
• ComponentDidmount ، ComponentDidupdate ، ComponentWillUnmount: قلاب UseEffect می تواند تمام ترکیبات این موارد را بیان کند (از جمله موارد LessCommon).
• GetSnapShotBeforeUpdate ، ComponentDidCatch و GetDeriredStateFromerror: هنوز هیچ معادل قلاب برای این روش ها وجود ندارد ، اما به زودی آنها اضافه می شوند.

چگونه می توانم داده ها را با قلاب انجام دهم؟

در اینجا یک نسخه ی نمایشی کوچک برای شروع کار وجود دارد. برای کسب اطلاعات بیشتر ، این مقاله را در مورد داده های واکشی با قلاب ها بررسی کنید.

آیا چیزی شبیه به متغیرهای نمونه وجود دارد؟

آره! قلاب Useref () فقط برای Refs Dom نیست. شیء "Ref" یک ظرف عمومی است که خاصیت فعلی آن قابل تغییر است و می تواند هر مقدار را نگه دارد ، مشابه یک خاصیت نمونه در یک کلاس.

می توانید از طریق استفاده از آن برای آن بنویسید:

اگر فقط می خواستیم یک فاصله زمانی را تعیین کنیم ، نیازی به Ref (شناسه می تواند محلی برای تأثیرگذاری باشد) ، اما اگر بخواهیم فاصله را از یک کنترل کننده رویداد پاک کنیم ، مفید است:

از نظر مفهومی ، شما می توانید به عنوان متغیرهای نمونه در یک کلاس فکر کنید. مگر اینکه در حال انجام اولیه سازی تنبل باشید ، از تنظیم مجدد در هنگام ارائه خودداری کنید - این می تواند منجر به رفتار شگفت آور شود. درعوض ، به طور معمول می خواهید Refs را در گیرنده های رویداد و جلوه ها تغییر دهید.

آیا باید از یک یا بسیاری از متغیرهای دولتی استفاده کنم؟

اگر از کلاسها می آیید ، ممکن است وسوسه شوید که همیشه یک بار با ماستات () تماس بگیرید و همه حالت ها را در یک شیء واحد قرار دهید. اگر دوست دارید می توانید این کار را انجام دهید. در اینجا نمونه ای از مؤلفه ای است که از حرکت ماوس پیروی می کند. ما موقعیت و اندازه آن را در حالت محلی حفظ می کنیم:

حال بیایید بگوییم که می خواهیم منطقی بنویسیم که هنگام حرکت کاربر ماوس خود را تغییر می دهد. توجه داشته باشید که چگونه ما باید این زمینه ها را به صورت دستی در شیء دولت قبلی ادغام کنیم:

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

اگر ادغام خودکار را از دست داده اید ، می توانید یک قلاب UselegacyState سفارشی بنویسید که به روزرسانی های حالت شی را ادغام می کند. با این حال ، ما توصیه می کنیم که حالت را به متغیرهای حالت چندگانه تقسیم کنید که بر اساس آن مقادیر تمایل به تغییر با هم دارند.

به عنوان مثال ، ما می توانیم حالت مؤلفه خود را به اشیاء موقعیت و اندازه تقسیم کنیم و همیشه موقعیت را بدون نیاز به ادغام جایگزین کنیم:

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

توجه داشته باشید که چگونه ما توانستیم بدون تغییر کد آنها ، فراخوان USESTATE را برای متغیر حالت موقعیت و اثر مرتبط با آن به یک قلاب سفارشی منتقل کنیم. اگر همه ایالت ها در یک شیء واحد بودند ، استخراج آن دشوارتر خواهد بود.

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

آیا می توانم فقط در به روزرسانی ها تأثیر بگذارم؟

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

چگونه می توان غرفه های قبلی یا حالت را دریافت کرد؟

دو مورد وجود دارد که در آن ممکن است بخواهید غرفه های قبلی یا ایالت را بدست آورید.

گاهی اوقات، برای پاک کردن یک اثر به وسایل قبلی نیاز دارید. برای مثال، ممکن است افکتی داشته باشید که بر اساس کاربر شناسه کاربر، مشترک یک سوکت شود. اگر userId prop تغییر کند، می خواهید اشتراک کاربری قبلی را لغو کنید و در مورد بعدی مشترک شوید. برای این کار لازم نیست کار خاصی انجام دهید:

در مثال بالا، اگر userId از 3 به 4 تغییر کند، ChatAPI. unsubscribeFromSocket(3) ابتدا اجرا می شود و سپس ChatAPI. subscribeToSocket(4) اجرا می شود. نیازی به دریافت userId "قبلی" نیست زیرا تابع پاکسازی آن را در یک بسته ضبط می کند.

در مواقع دیگر، ممکن است لازم باشد وضعیت را بر اساس تغییر در props یا حالت دیگر تنظیم کنید. این به ندرت مورد نیاز است و معمولاً نشانه این است که حالت تکراری یا اضافی دارید. با این حال، در موارد نادری که به این الگو نیاز دارید، می توانید حالت یا پروپوزال های قبلی را در حالت ذخیره کرده و در حین رندر به روزرسانی کنید.

ما قبلا یک Hook سفارشی به نام usePrevious برای نگهداری مقدار قبلی پیشنهاد کرده ایم. با این حال، ما دریافتیم که بیشتر موارد استفاده در دو الگوی شرح داده شده در بالا قرار می گیرند. اگر مورد استفاده شما متفاوت است، می توانید مقداری را در یک ref نگه دارید و در صورت نیاز به صورت دستی آن را به روز کنید. از خواندن و به روز رسانی ref ها در حین رندر خودداری کنید زیرا این امر پیش بینی و درک رفتار جزء شما را دشوار می کند.

چرا من در داخل کارکرد خود لوازم یا حالتی کهنه می بینم؟

هر تابعی در داخل یک کامپوننت، از جمله کنترل کننده ها و افکت ها، ویژگی ها و حالت ها را از رندری که در آن ایجاد شده است را می بیند. به عنوان مثال، کدی را مانند زیر در نظر بگیرید:

اگر ابتدا روی «نمایش هشدار» کلیک کنید و سپس شمارنده را افزایش دهید، هشدار متغیر شمارش را در زمانی که روی دکمه «نمایش هشدار» کلیک کردید نشان می دهد. این از اشکالات ناشی از کد با فرض عدم تغییر پروپوزال ها و وضعیت جلوگیری می کند.

اگر عمداً می خواهید آخرین وضعیت را از برخی تماس های غیرهمزمان بخوانید، می توانید آن را در یک مرجع نگه دارید، آن را تغییر دهید و از روی آن بخوانید.

در نهایت، یکی دیگر از دلایل احتمالی که شما در حال مشاهده پروپوزال ها یا حالت های قدیمی هستید این است که از بهینه سازی «آرایه وابستگی» استفاده می کنید اما همه وابستگی ها را به درستی مشخص نکرده اید. به عنوان مثال، اگر یک افکت [] را به عنوان آرگومان دوم مشخص کند، اما someProp را در داخل بخواند، مقدار اولیه someProp را «دیدن» ادامه خواهد داد. راه حل این است که یا آرایه وابستگی را حذف کنید یا آن را تعمیر کنید. در اینجا نحوه برخورد با توابع و راهبردهای رایج دیگر برای اجرای کمتر افکت ها بدون رد کردن نادرست وابستگی ها آورده شده است.

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

ما یک قانون ESLINT با احترام جامع را به عنوان بخشی از بسته ESLINT-PLUGIN-REACT-HOOKS ارائه می دهیم. این هشدار می دهد که وابستگی ها به طور نادرست مشخص شده اند و رفع مشکل را نشان می دهند.

چگونه می توانم GetDeriredStateFromProps را پیاده سازی کنم؟

در حالی که احتمالاً به آن احتیاج ندارید ، در موارد نادری که انجام می دهید (مانند اجرای یک مؤلفه) ، می توانید حالت را در حین ارائه درست به روز کنید. React بلافاصله پس از خروج از اولین رندر ، مؤلفه را با حالت به روز شده دوباره اجرا می کند تا گران نباشد.

در اینجا ، ما مقدار قبلی Row Prop را در یک متغیر حالت ذخیره می کنیم تا بتوانیم مقایسه کنیم:

این ممکن است در ابتدا عجیب به نظر برسد ، اما به روزرسانی در حین ارائه دقیقاً همان چیزی است که GetDeriredStateFromProps همیشه مانند مفهومی بوده است.

آیا چیزی مانند ForcePdate وجود دارد؟

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

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

در صورت امکان سعی کنید از این الگوی خودداری کنید.

آیا می توانم به یک مؤلفه عملکرد مراجعه کنم؟

در حالی که شما نباید به این موضوع اغلب احتیاج داشته باشید ، ممکن است برخی از روش های ضروری را در اختیار یک جزء والدین با قلاب UseimperativeHandle قرار دهید.

چگونه می توانم یک گره DOM را اندازه گیری کنم؟

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

ما در این مثال Useref را انتخاب نکردیم زیرا یک شیء Ref ما را در مورد تغییر در مقدار Ref فعلی به ما اطلاع نمی دهد. استفاده از پاسخ به تماس اطمینان می دهد که حتی اگر یک مؤلفه کودک بعداً گره اندازه گیری شده را نشان دهد (به عنوان مثال در پاسخ به یک کلیک) ، ما هنوز در مورد آن در مؤلفه والدین مطلع می شویم و می توانیم اندازه گیری ها را به روز کنیم.

توجه داشته باشید که ما [] را به عنوان یک آرایه وابستگی به UseCallback منتقل می کنیم. این تضمین می کند که پاسخ به تماس Ref ما بین مجدداً تغییر نمی کند ، بنابراین واکنش نشان نمی دهد آن را غیر ضروری نمی نامند.

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

اگر می خواهید ، می توانید این منطق را در یک قلاب قابل استفاده مجدد استخراج کنید:

const [thing ، setThing] = useState () به چه معنی است؟

اگر با این نحو آشنا نیستید ، توضیحات موجود در مستندات Hook State را بررسی کنید.

آیا می توانم در به روزرسانی ها تأثیر بگذارم؟

آره. به شلیك مشروط به یك اثر مراجعه كنید. توجه داشته باشید که فراموش کردن به روزرسانی ها اغلب اشکالات را معرفی می کند ، به همین دلیل این رفتار پیش فرض نیست.

آیا حذف توابع از لیست وابستگی ها بی خطر است؟

به طور کلی ، نه.

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

اگر بعد از آن ما هنوز از مقادیر از دامنه مؤلفه استفاده نمی کنیم ، مشخص کردن [] بی خطر است:

بسته به مورد استفاده شما ، چند گزینه دیگر در زیر شرح داده شده است.

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

ما قانون ESLINT را به عنوان بخشی از بسته ESLINT-PLUGIN-rea-hooks قانون ارائه می دهیم. این به شما کمک می کند تا مؤلفه هایی را پیدا کنید که به طور مداوم به روزرسانی ها را انجام نمی دهند.

بیایید ببینیم چرا این مهم است.

اگر لیستی از وابستگی ها را به عنوان آخرین آرگومان برای استفاده ، UselayOuteffect ، Usememo ، UseCallback یا UseimperativeHandle مشخص کنید ، باید شامل تمام مقادیری باشد که در داخل پاسخ به استفاده می شوند و در جریان داده React شرکت می کنند. این شامل غرفه ها ، حالت ها و هر چیزی است که از آنها حاصل می شود.

اگر هیچ چیز در آن (یا توابع خوانده شده توسط آن) هیچ چیزی در آن (یا توابع خوانده شده توسط آن) وجود ندارد ، از لیست وابستگی خارج می شود. این مثال یک اشکال دارد:

رفع مشکل این است که آن عملکرد را در داخل اثر خود جابجا کنید. این امر به راحتی می توان دید که از چه مواردی استفاده می کند یا از اثر شما استفاده می کند ، و اطمینان حاصل می کند که همه آنها اعلام شده اند:

این همچنین به شما امکان می دهد پاسخ های خارج از سفارش را با یک متغیر محلی در داخل اثر انجام دهید:

ما عملکرد را درون اثر جابجا کردیم ، بنابراین نیازی به حضور در لیست وابستگی آن نیست.

نکته

برای کسب اطلاعات بیشتر در مورد داده های واکشی با قلاب ، این نسخه ی نمایشی کوچک و این مقاله را بررسی کنید.

اگر به دلایلی نمی توانید یک عملکرد را در یک اثر جابجا کنید ، چند گزینه دیگر وجود دارد:

• می توانید آن عملکرد را به خارج از مؤلفه خود منتقل کنید. در این حالت ، این عملکرد تضمین می شود که هیچ گونه غرفه یا حالت را ارجاع ندهد ، و همچنین نیازی به حضور در لیست وابستگی ها نیست.
• اگر عملکردی که شما تماس می گیرید یک محاسبات خالص است و هنگام ارائه تماس با آن بی خطر است ، ممکن است در عوض آن را خارج از اثر بنامید و تأثیر آن را به مقدار برگشتی بستگی دارید.
• به عنوان آخرین راه حل ، می توانید یک تابع را برای تأثیر وابستگی ها اضافه کنید اما تعریف آن را در قلاب USECALLBACK بسته بندی کنید. این تضمین می کند که در هر رندر تغییر نمی کند مگر اینکه وابستگی های خاص خود نیز تغییر کند:

توجه داشته باشید که در مثال بالا باید عملکرد را در لیست وابستگی ها نگه داریم. این تضمین می کند که تغییر در محصول ProductID از ProductPage به طور خودکار باعث ایجاد یک بازپرداخت در مؤلفه ProductDetails می شود.

اگر وابستگی های تأثیر من بیش از حد تغییر کند ، چه کاری می توانم انجام دهم؟

بعضی اوقات ، اثر شما ممکن است استفاده از حالت باشد که اغلب تغییر می کند. ممکن است شما وسوسه شوید که از لیستی از وابستگی ها آن ایالت را حذف کنید ، اما این معمولاً منجر به اشکالات می شود:

مجموعه وابستگی های خالی ، [] ، به این معنی است که اثر فقط یک بار در صورت نصب مؤلفه اجرا می شود و نه بر روی هر ارائه مجدد. مشکل این است که در داخل پاسخ به تماس SetInterval ، مقدار شمارش تغییر نمی کند ، زیرا ما با مقدار شمارش تنظیم شده روی 0 بسته شده ایم ، همانطور که در هنگام تماس تلفنی اثر وجود داشت. در هر ثانیه ، این پاسخ به تماس با SetCount (0 + 1) تماس می گیرد ، بنابراین تعداد هرگز از 1 نمی رود.

مشخص کردن [تعداد] به عنوان لیستی از وابستگی ها باعث رفع اشکال می شود ، اما باعث می شود که فاصله در هر تغییر تنظیم شود. به طور موثری ، هر SetInterval یک فرصت برای اجرای قبل از پاکسازی (مشابه یک Settimeout) را پیدا می کند که ممکن است مطلوب نباشد. برای رفع این مشکل ، می توانیم از فرم به روزرسانی عملکردی SetState استفاده کنیم. این امکان را به ما می دهد تا بدون مراجعه به وضعیت فعلی ، چگونه دولت باید تغییر کند:

(هویت عملکرد SetCount تضمین شده است که پایدار باشد ، بنابراین از بین بردن بی خطر است.)

اکنون ، پاسخ به تماس SetInterval یک بار در ثانیه اجرا می شود ، اما هر بار که تماس داخلی به SetCount می تواند از یک مقدار به روز برای شمارش استفاده کند (در اینجا C به نام C خوانده می شود.)

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

به عنوان آخرین راه حل ، اگر می خواهید چیزی شبیه به این در یک کلاس باشد ، می توانید از یک Ref برای نگه داشتن یک متغیر قابل تغییر استفاده کنید. سپس می توانید برای آن بنویسید و بخوانید. مثلا:

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

چگونه می توانم chest componentupdate را پیاده سازی کنم؟

شما می توانید یک مؤلفه عملکرد را با React. memo برای مقایسه کم عمق غرفه های آن بسته بندی کنید:

این یک قلاب نیست زیرا مانند قلاب ها ساخته نمی شوند. React. Memo معادل PureComponent است ، اما فقط غرفه ها را مقایسه می کند.(همچنین می توانید یک آرگومان دوم اضافه کنید تا یک عملکرد مقایسه سفارشی را مشخص کنید که غرفه های قدیمی و جدید را به خود اختصاص می دهد. اگر درست برگردد ، به روزرسانی رد می شود.)

React. Memo حالت را مقایسه نمی کند زیرا هیچ شیء دولتی برای مقایسه وجود ندارد. اما شما می توانید کودکان را نیز خالص کنید ، یا حتی کودکان فردی را با Usememo بهینه کنید.

چگونه محاسبات را به یاد می آوریم؟

Hook Usememo به شما امکان می دهد با "یادآوری" محاسبات قبلی ، محاسبات حافظه پنهان را بین چندین رندر ذخیره کنید:

این کد Computeexpencial Value (A ، B) را فراخوانی می کند. اما اگر وابستگی ها [A ، B] از آخرین ارزش تغییر نکرده اند ، Usememo بار دیگر آن را صدا می کند و به سادگی از آخرین مقدار بازگشت مجدد استفاده می کند.

به یاد داشته باشید که عملکرد منتقل شده به Usememo در هنگام ارائه اجرا می شود. در آنجا کاری انجام ندهید که به طور معمول هنگام ارائه آن انجام نمی دهید. به عنوان مثال ، عوارض جانبی متعلق به UseEffect است ، نه Usememo.

ممکن است شما به عنوان یک بهینه سازی عملکرد به Usememo اعتماد کنید ، نه به عنوان یک ضمانت معنایی. در آینده ، REACT ممکن است برخی از مقادیر قبلی را فراموش کرده و آنها را در رندر بعدی محاسبه کند ، به عنوان مثال. برای رایگان حافظه برای اجزای خارج از صفحه. کد خود را طوری بنویسید که هنوز هم بدون Usememo کار کند - و سپس آن را برای بهینه سازی عملکرد اضافه کنید.(برای موارد نادری که هرگز یک ارزش را نباید دوباره جبران کرد ، می توانید با تنبلی یک Ref را آغاز کنید.)

به راحتی ، Usememo همچنین به شما امکان می دهد از یک کودک دوباره گران قیمت کودک را پرش کنید:

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

چگونه می توان اشیاء گران قیمت را تنبل کرد؟

Usememo به شما امکان می دهد اگر وابستگی ها یکسان باشند ، یک محاسبه گران قیمت را به یاد می آورید. با این حال ، این فقط به عنوان یک اشاره عمل می کند ، و تضمین نمی کند که محاسبات دوباره اجرا نشود. اما گاهی اوقات باید مطمئن باشید که یک شیء فقط یک بار ایجاد می شود.

اولین مورد استفاده مشترک هنگام ایجاد حالت اولیه گران است:

برای جلوگیری از ایجاد مجدد حالت اولیه نادیده گرفته شده ، می توانیم عملکردی را برای استفاده از ما انجام دهیم:

React فقط در اولین رندر این عملکرد را فراخوانی می کند. به مرجع API USESTATE مراجعه کنید.

همچنین ممکن است گاهی بخواهید از ایجاد مجدد مقدار اولیه ()useRef اجتناب کنید. به عنوان مثال، شاید بخواهید اطمینان حاصل کنید که یک نمونه کلاس ضروری فقط یک بار ایجاد می شود:

useRef اضافه بار تابع خاصی مانند useState را نمی پذیرد. درعوض، می توانید تابع خود را بنویسید که آن را ایجاد و تنظیم کند:

این امر از ایجاد یک شی گران قیمت تا زمانی که برای اولین بار واقعاً مورد نیاز نباشد، جلوگیری می کند. اگر از Flow یا TypeScript استفاده می کنید، می توانید برای راحتی به getObserver() یک نوع غیر تهی بدهید.

آیا Hook ها به دلیل ایجاد توابع در رندر کند هستند؟

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

علاوه بر این، در نظر بگیرید که طراحی Hooks از چند جهت کارآمدتر است:

• قلاب ها از بسیاری از هزینه های سرباری که کلاس ها نیاز دارند، اجتناب می کنند، مانند هزینه ایجاد نمونه های کلاس و اتصال دهنده های رویداد در سازنده.
• کد اصطلاحی با استفاده از Hooks نیازی به تودرتوی درخت کامپوننت عمیقی ندارد که در پایگاه های کدی که از مولفه های مرتبه بالاتر، رندر پروپ ها و زمینه استفاده می کنند، رایج است. با درختان اجزای کوچکتر، React کار کمتری برای انجام دادن دارد.

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

useCallback Hook به شما امکان می دهد همان مرجع بازگشت به تماس را بین رندرهای مجدد نگه دارید تا ComponentUpdate به کار خود ادامه دهد:

چگونه از ارسال پاسخ به تماس ها جلوگیری کنیم؟

ما متوجه شده ایم که اکثر مردم از ارسال تماس های دستی در هر سطح از درخت مؤلفه لذت نمی برند. اگرچه واضح تر است، اما می تواند مانند "لوله کشی" زیادی باشد.

در درخت های کامپوننت بزرگ، جایگزینی که ما توصیه می کنیم این است که یک تابع ارسال را از useReducer از طریق متن ارسال کنید:

هر کودکی در درخت داخل TodosApp می تواند از تابع ارسال برای ارسال اقدامات تا TodosApp استفاده کند:

این کار از منظر تعمیر و نگهداری راحت تر است (نیازی به ارسال مجدد تماس ها نیست)، و به طور کلی از مشکل برگشت تماس جلوگیری می کند. ارسال پیام به این شکل الگوی توصیه شده برای به روزرسانی های عمیق است.

توجه داشته باشید که هنوز هم می توانید وضعیت برنامه را به عنوان غرفه ها (صریح تر) یا به عنوان زمینه (برای به روزرسانی های بسیار عمیق راحت تر) انتخاب کنید. اگر از متن برای تصویب وضعیت نیز استفاده می کنید ، از دو نوع متن مختلف استفاده کنید - زمینه اعزام هرگز تغییر نمی کند ، بنابراین مؤلفه هایی که آن را می خوانند نیازی به تجدید نظر ندارند ، مگر اینکه به حالت برنامه نیز احتیاج داشته باشند.

چگونه می توان یک مقدار اغلب در حال تغییر را از useCallback خواند؟

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

توصیه می کنیم به جای تماس های فردی در غرفه ها ، اعزام را در متن منتقل کنید. رویکرد زیر فقط در اینجا برای کامل بودن و به عنوان دریچه فرار ذکر شده است.

در برخی موارد نادر ممکن است شما نیاز به یادآوری پاسخ به تماس با USECALLBACK داشته باشید اما یادآوری خیلی خوب کار نمی کند زیرا عملکرد داخلی باید اغلب دوباره ایجاد شود. اگر عملکردی که شما به یاد می آورید یک کنترل کننده رویداد است و در هنگام ارائه استفاده نمی شود ، می توانید از Ref به عنوان یک متغیر نمونه استفاده کنید و آخرین مقدار متعهد را به صورت دستی ذخیره کنید:

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

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

چگونه React Hok Calls با مؤلفه ها تماس می گیرد؟

React مؤلفه ارائه دهنده فعلی را پیگیری می کند. به لطف قوانین قلاب ، ما می دانیم که قلاب ها فقط از اجزای React (یا قلاب های سفارشی - که فقط از اجزای React نیز خوانده می شوند) فراخوانی می شوند.

یک لیست داخلی از "سلولهای حافظه" در ارتباط با هر مؤلفه وجود دارد. آنها فقط اشیاء JavaScript هستند که می توانیم برخی از داده ها را قرار دهیم. هنگامی که شما یک قلاب را مانند useState () صدا می کنید ، سلول فعلی را می خواند (یا آن را در اولین رندر اولیه) می خواند ، و سپس نشانگر را به حالت بعدی منتقل می کند. اینگونه است که چندین مورد استفاده () هر یک از دولت های محلی مستقل دریافت می کنند.

هنر قبلی برای قلاب چیست؟

قلاب ها ایده ها را از چندین منبع مختلف سنتز می کنند:

• آزمایش های قدیمی ما با API های عملکردی در مخزن واکنش- آینده.
• آزمایش های جامعه React با API های رندر ، از جمله مؤلفه واکنش رایان فلورانس. پیشنهاد کلمات کلیدی به عنوان یک نحو قند برای غرفه های ارائه شده است.
• متغیرهای حالت و سلولهای حالت در نمایشگر. در عقلدر Rxدر OCAML چند هسته ای.

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