خواندن ۳ دقیقه·۱ سال پیش

چرا Hook تو React وجود داره و چه مشکلی رو حل میکنه؟

یادتونه قبلا فقط میشد کامپوننت ها رو به صورت کلاس تو ری اکت تعریف کرد؟ چرا؟!

چون ری اکت Hook نداشت و فقط کامپوننت هایی که بر اساس کلاس نوشته شده بودن میتونستن lifecycle و state داشته باشن. اگه قبلا با کلاس کامپوننت ها کار کرده باشین میدونین که این متد ها رو برای lifecycle خودشون دارن:

constructor render componentDidMount componentDidUpdate` componentWillUnmount

و با همین ها میتونستیم تعریف کنیم کامپوننتمون کی و چطور تغییر کنه.

چون خیلی بدردمون نمیخوره و شخصا هم علاقه ای به کلاس کامپوننت ها ندارم، بیاین ازشون بگذریم و ببنیم ری اکت چطور برای function component ها lifecycle تعریف میکنه؟!

The React Function Component Lifecycle

function Hello(props) {
 return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

ری اکت این کامپوننت رو به سادگی با اجرا کردن تابع Hello(someProps) رندر میکنه. و اگه بخوایم این کامپننت re-render بشه، این تابع دوباره و دوباره باید اجرا بشه. اینجوری تابع ما هیچ کنترلی رو خودش نداره. و همینطور هیچ ارتباطی هم با state , lifecycle ری اکت نداره. و اینجاست که hook وارد میشه:

React Hooks allows Function components to “hook” into the React state and lifecycle.

هوک از ورژن ۱۶.۸ به بعد به React اضافه شد.

تو این کد برای اضافه کردن state به کامپوننتمون ، از useState استفاده کردیم . ری اکت این state رو تو re-render شدن هاش حفظ میکنه.

function Hello(props) {
useEffect(() => {
console.log(&quotmount and update&quot);
    return () => {
      console.log(&quotcleanup&quot); 
   };
  });
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

یا مثلا اینجا اومدیم از useeffect استفاده کردیم. بهش یه تابع به عنوان ورودی دادیم که میخوایم هروقتی که کامپوننتمون ری رندر یا اپدیت میشه اجرا بشه.

custom hook

قبل اینکه هوک خودمون رو تو ری اکت بنویسیم باید مشخصه هایی که یک هوک داره رو بدونیم!

هوک حتما با use شروع میشه.
حتما حتما در داخل component( قطعا functional‌دیگه!) فراخوانی میشه. و نمیشه خارج کامپوننت ازش استفاده کرد.
و اگر شما تو کامپوننت یه تابع نوشتین ، نمیتونید تو این تابع از هوک استفاده کنید.

خب اصلا چرا باید از custom hook استفاده کرد؟ میشه یه اپ بنویسم بدون custom hook؟ آره میشه. اما استفاده از custom hook این اجازه رو میده که منطقی که برای یک کامپننت نوشتیم ، reuseable بشه.

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

میتونیم همون منطقی که برای کامپننت انلاین/آفلاین بودن کاربر نوشتیم رو کپی کنیم تو این کامپوننت جدیدیمون و یا نه! از custom hook استفاده کنیم.(البته روش های دیگه ای هم برای این کار داریم که اینجا نمیریم سراغشون)

چطور hook خودمون رو بنویسیم؟

هوک و کامپوننت هردوشون تابعن! برای share کردن یک منطق بین اونهاهم از یک تابع استفاده می کنیم. این تابع که اسمش custom hook هست، همه ویژگی هایی که اول گفتیم رو داره به علاوه اینکه میشه توش از hook های دیگه هم استفاده کرد!

A custom Hook is a JavaScript function whose name starts with ”use” and that may call other Hooks

به همین سادگی! هر تابعی که نوشتیم ، با هر ورودی و خروجی، اگه فقط اول اسمش با use( مهمه کوچک بودن حروف) شروع بشه ، قوانین hook ‌ها روش اعمال میشه. مثالی که از تعریف custom hook میشه زد اینجا هست: دیگه من زحمت کپی کردنش رو نکشیدم:))

منبع:

eact hook function component class component react

نرگس

یک علوم کامپیوتر خوان سردرگم

شاید از این پست‌ها خوشتان بیاید