فرض کنید از یک سرویس Chat استفاده می کنید و می خواهید که دو بخش زیر را در برنامه پیاده سازی کنید:
همانطور که در سناریوهای بالا مشاهده می کنید نمایش وضعیت آنلاین بودن کاربر در هر دو کاربر مشترک می باشد. برای اینکه از نوشتن کدهای تکراری جلوگیری کنیم می توانیم یک hook نوشته که وضعیت کاربر مشخص شده را برگرداند و این حالت را می توانید بین کاموپننت های مختلف به اشتراک بزاریم.
Hook دلخواه خود را چگونه ایجاد کنیم؟
در جاوااسکریپت وقتی می خواهیم یک منظق را بین دو تابع به اشتراک بگذاریم از یک تابع سوم استفاده می کنیم. به دلیل آنکه کامپوننت و hook هر دو تابع هستند می توانیم از این روش برای اشتراک گذاری منطق مورد نظر استفاده کنیم.
Hook های سفارشی یک تابع javascript می باشد که با کلمه use شروع می شود. برای نمونه useFriendStatus که می خواهیم وضعیت آنلاین کاربر را بین کامپوننت ها به اشتراک بگذاریم.
import React, { useState, useEffect } from 'react'; function useFriendStatus(friendID) { const [isOnline, setIsOnline] = useState(null); useEffect(() => { function handleStatusChange(status) { setIsOnline(status.isOnline); } ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange); return () => { ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange) }; }); return isOnline; }
در hook های سفارشی شما می توانید تعیین کنید که چه پارامترهایی دریافت شود و یا چه مقداری برگردانده شود به عبارتی دیگر hook سفارشی همانند یک تابع ساده می باشد که همیشه با کلمه use شروع می شود و از این طریق اعلام می کنیم که قواعد hook بر روی آن اعمال شود.
هدف از hook سفارشی useFriendStatus آن است که وضعیت آنلاین بودن کاربر را برای ما مشخص کند و برای این منظور یک پارامتر ورودی friendID تعریف شده است که بر اساس آن وضعیت آنلاین بودن این کاربر را برمیگرداند.
چگونه از hook های سفارشی استفاده کنیم؟
قواعد استفاده از این hook ها همانند سایر hook ها می باشد و همانند آنها فراخوانی می شوند:
function FriendListItem(props) { const isOnline = useFriendStatus(props.friend.id); return ( <li style={{ color: isOnline ? 'green' : 'black' }}> {props.friend.name} </li> ); }
منابع:
