قلاب با یک نگاه

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

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

توضیح دقیق

انگیزه یادگیری را بخوانید که چرا ما قلاب هایی را برای واکنش نشان می دهیم.

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

این مثال یک پیشخوان را ارائه می دهد. وقتی روی دکمه کلیک می کنید ، مقدار آن را افزایش می دهد:

در اینجا ، Usestate یک قلاب است (ما در مورد یک لحظه صحبت خواهیم کرد). ما آن را درون یک جزء عملکرد می نامیم تا برخی از حالت های محلی را به آن اضافه کنیم. React این حالت را بین بازپرداخت ها حفظ می کند. Usestate یک جفت را برمی گرداند: مقدار وضعیت فعلی و تابعی که به شما امکان می دهد آن را به روز کنید. می توانید این عملکرد را از یک کنترل کننده رویداد یا جایی دیگر فراخوانی کنید. این شبیه به این است. SetState در یک کلاس ، به جز اینکه دولت قدیمی و جدید را با هم ادغام نمی کند..

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

اعلام چندین متغیر حالت

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

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

اما قلاب چیست؟

قلاب ها کارکردهایی هستند که به شما امکان می دهند "حالت واکنش" و ویژگی های چرخه عمر را از اجزای عملکردی "وصل کنید". قلاب ها در داخل کلاس ها کار نمی کنند - آنها به شما امکان می دهند بدون کلاس از واکنش استفاده کنید.(ما توصیه نمی کنیم که اجزای موجود خود را یک شبه بازنویسی کنید اما در صورت تمایل می توانید از قلاب در موارد جدید استفاده کنید.)

React چند قلاب داخلی مانند Usestate را فراهم می کند. همچنین می توانید قلاب های خود را برای استفاده مجدد از رفتار حالت بین اجزای مختلف ایجاد کنید. ابتدا به قلاب های داخلی نگاه خواهیم کرد.

توضیح دقیق

می توانید در مورد Hook State در یک صفحه اختصاصی اطلاعات بیشتری کسب کنید: با استفاده از Hook State.

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

Hook Effect ، UseEffect ، امکان انجام عوارض جانبی را از یک مؤلفه عملکرد اضافه می کند. این هدف همان هدف را به عنوان ComponentDidmount ، ComponentDidupdate و ComponentWillunmount در کلاس های React ارائه می دهد ، اما به یک API واحد متحد می شود.(ما نمونه هایی را برای مقایسه با استفاده از این روش ها در استفاده از قلاب اثر نشان خواهیم داد.)

به عنوان مثال ، این مؤلفه عنوان سند را پس از به روزرسانی React DOM تنظیم می کند:

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

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

در این مثال ، هنگامی که مؤلفه از آن جدا می شود ، و همچنین قبل از اجرای مجدد اثر به دلیل ارائه بعدی ، از Chatapi ما مشترک می شود.(اگر می خواهید ، راهی وجود دارد که می گوید واکنش دوباره به اشتراک مجدد در مورد اینکه آیا props. friend. id ما به چتاپی منتقل نشده ایم تغییر می کند.)

دقیقاً مانند Usestate ، می توانید بیش از یک اثر واحد در یک مؤلفه استفاده کنید:

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

توضیح دقیق

می توانید در مورد UseEffect در یک صفحه اختصاصی اطلاعات بیشتری کسب کنید: با استفاده از HOOCK Effect.

✌ قوانین قلاب

قلاب ها توابع JavaScript هستند ، اما آنها دو قانون اضافی را اعمال می کنند:

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

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

توضیح دقیق

می توانید در مورد این قوانین در یک صفحه اختصاصی اطلاعات بیشتری کسب کنید: قوانین قلاب.

سیگنال های تجاری...