OWL

Welcome!

This community is for professionals and enthusiasts of our products and services.
Share and discuss the best content and new marketing ideas, build your professional profile and become a better marketer together.

3

مثالی برای کار کرد هوک و اینکه چطوری کار میکنه میتونین ارایه بدین؟

فقط میخوام بدونم چطوری کار میکنه

آواتار
انصراف
1 پاسخ
2
بهترین پاسخ

به عنوان یک مثال کاربردی، فرض کنید شما در OWL یک کامپوننت دارید که باید لیستی از داده‌ها را از سرور دریافت کند و آنها را در UI نمایش دهد. در این حالت، می‌توانید با استفاده از قلاب useEffect، درخواست‌های شبکه برای دریافت داده‌ها را ارسال کرده و داده‌ها را به UI اضافه کنید.

در مثال زیر، فرض کنید یک کامپوننت UserList ایجاد کرده‌ایم که باید لیستی از کاربران را از سرور دریافت کند و آنها را در یک جدول در UI نمایش دهد:



در این کد، ابتدا از useState برای ایجاد یک state به نام users استفاده کرده‌ایم که حاوی لیستی از کاربران است. سپس از useService برای ایجاد یک instance از سرویس کاربرها استفاده کرده‌ایم. در قسمت بعد، با استفاده از قلاب useEffect، درخواست‌های شبکه برای دریافت داده‌ها را ارسال کرده و داده‌ها را به users اضافه کرده‌ایم.

در این حالت، useEffect با دو پارامتر استفاده شده است. در پارامتر اول، یک تابع که یک Promise برمی‌گرداند تعریف شده است. این تابع fetchData برای دریافت داده‌ها از userService استفاده می‌کند و پس از دریافت داده‌ها، آنها را با استفاده از تابع setUsers به state users اضافه می‌کند. در پارامتر دوم، یک آرایه خالی تعریف شده است. این آرایه نشان‌دهنده‌ی دیپ‌دپندنسهای مورد استفاده در این قسمت است و در این حالت، هیچ دیپ‌دپندنسی وجود ندارد. به این معنی که useEffect فقط یک بار اجرا می‌شود و دیگر تکرار نمی‌شود.

در نهایت، با استفاده از جدول Table از @web/widgets، داده‌های users را در یک جدول در UI نمایش می‌دهیم. در این قسمت، هر ستون جدول به واسطه‌ی نام ویژگی در داده‌های کاربران تعریف شده است.

آواتار
انصراف