مروری بر مفهوم hook

مقدمه

به فصل هفتم خوش آمدید! در دو فصل گذشته، با دو هوک بنیادی React، یعنی useState و useEffect، به صورت عملی کار کردیم. دیدیم که useState به کامپوننت‌های تابعی «حافظه» می‌بخشد و useEffect به آنها اجازه می‌دهد تا با دنیای خارج تعامل داشته باشند. اکنون زمان آن است که یک قدم به عقب برگردیم و به مفهوم «هوک» (Hook) به صورت کلی‌تر نگاه کنیم.

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

مروری بر هوک‌های پایه

بیایید به صورت خلاصه، دو هوکی را که تاکنون یاد گرفته‌ایم، مرور کنیم. این دو هوک، ۹۰٪ نیازهای شما در مدیریت state و عوارض جانبی را پوشش خواهند داد.

useState: هوک وضعیت

این هوک به شما اجازه می‌دهد تا یک متغیر state را در کامپوننت خود تعریف کنید.

JAVASCRIPT (React)

const [state, setState] = useState(initialState);

useState یک مقدار اولیه را گرفته و یک آرایه شامل مقدار فعلی state و یک تابع برای به‌روزرسانی آن را برمی‌گرداند. با فراخوانی تابع setter شما به React می‌گویید که یک رندر مجدد را با state جدید برنامه‌ریزی کند.

useEffect: هوک افکت

این هوک به شما اجازه می‌دهد تا کدی را اجرا کنید که با سیستم‌های خارجی در تعامل است (عوارض جانبی).

JAVASCRIPT (React)

useEffect(() => {
  // Side effect logic goes here.
  return () => {
    // Optional cleanup logic goes here.
  };
}, [dependencies]);

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

انگیزه پشت طراحی هوک‌ها

تیم React با معرفی هوک‌ها چند هدف اصلی را دنبال می‌کرد:

• استفاده مجدد از منطق stateدار: قبل از هوک‌ها، اشتراک‌گذاری منطق stateدار بین کامپوننت‌ها بسیار دشوار بود و نیازمند الگوهای پیچیده‌ای مانند Render Props و Higher-Order Components (HOCs) بود. هوک‌ها، به خصوص «هوک‌های سفارشی» (Custom Hooks)، این مشکل را به زیبایی حل کردند.
• کامپوننت‌های ساده‌تر: کامپوننت‌های کلاس‌محور می‌توانستند بسیار پیچیده و بزرگ شوند. منطق مرتبط با یک ویژگی خاص، اغلب بین چندین متد چرخه حیات (مانند componentDidMount و componentDidUpdate) پراکنده می‌شد. هوک useEffect به ما اجازه می‌دهد تا تمام منطق مرتبط با یک عارضه جانبی را در یک مکان واحد جمع‌آوری کنیم.
• حذف پیچیدگی this: کار با کلمه کلیدی this در کلاس‌های جاوااسکریپت، یکی از منابع اصلی سردرگمی برای توسعه‌دهندگان است. کامپوننت‌های تابعی و هوک‌ها به طور کلی این نیاز را از بین می‌برند.

در این درس، ما با نگاهی کلی‌تر، جایگاه و اهمیت هوک‌ها را در React مدرن درک کردیم. هوک‌ها یک API قدرتمند و مستقیم به مفاهیم اصلی React ارائه می‌دهند و به ما اجازه می‌دهند تا کامپوننت‌های تابعی کاملاً پویا و پیچیده بسازیم.

اکنون که با فلسفه هوک‌ها آشنا شدیم، در درس‌های بعدی این فصل به بررسی هوک‌های پرکاربرد دیگری مانند useRef و useMemo و همچنین الگوی قدرتمند ساخت هوک‌های سفارشی خواهیم پرداخت.