هوکس چیست؟ (What is Hooks?)

هوکس در ری اکت راهی ساده برای استفاده از state و امکانات فریم ورک است. با هوکس در ری اکت می توانی داخل کامپوننت تابعی هم state و هم lifecycle را مدیریت کنی، بدون اینکه سراغ کلاس ها بروی.

هوکس در ری اکت دقیقا چیست؟

هوک (Hook) یک تابع جاوااسکریپت است. این تابع اجازه می دهد از امکاناتی مثل state و lifecycle در کامپوننت های تابعی استفاده کنی.

state یعنی وضعیت زنده برنامه؛ چیزهایی که ممکن است عوض شوند. مثلا رنگ انتخابی کاربر، تعداد آیتم های سبد خرید، یا متن داخل input.

lifecycle یعنی مراحل زندگی یک کامپوننت؛ مثل وقتی ساخته می شود، آپدیت می شود، یا از صفحه حذف می شود. هوکس در ری اکت یک راه مستقیم برای کار با این مفاهیم است.

مثال ساده از یک هوک: useState

در این مثال از هوک useState استفاده می کنیم. useState یک هوک است که state را داخل کامپوننت تابعی نگه می دارد.

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>
        My favorite color is {color}!
      </h1>
      <button
        type="button"
        onClick={() => {
          setColor("blue");
        }}
      >
        Blue
      </button>
      <button
        type="button"
        onClick={() => {
          setColor("red");
        }}
      >
        Red
      </button>
      <button
        type="button"
        onClick={() => {
          setColor("pink");
        }}
      >
        Pink
      </button>
      <button
        type="button"
        onClick={() => {
          setColor("green");
        }}
      >
        Green
      </button>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <FavoriteColor />
);

مشاهده در ادیتور

گام به گام مثال FavoriteColor

1. کتابخانه useState را از react و createRoot را از react-dom/client ایمپورت کن.
2. کامپوننت FavoriteColor را بساز؛ یک تابع ساده.
3. با useState آرایه [color, setColor] را تعریف کن و مقدار اولیه را "red" بگذار.
4. در خروجی، متن h1 را بر اساس مقدار color نمایش بده.
5. چهار دکمه بساز و در هر onClick تابع setColor را با رنگ جدید صدا بزن.
6. در انتها با createRoot کامپوننت FavoriteColor را داخل ریشه صفحه رندر کن.

در اینجا هوکس در ری اکت کمک می کند state رنگ را در یک کامپوننت تابعی نگه داری. هر بار روی دکمه ای کلیک می کنی، state عوض می شود و کامپوننت دوباره رندر می شود.

چطور از هوکس استفاده کنیم؟

برای استفاده از هر هوک باید آن را از react ایمپورت کنی. مثلا برای useState این طور عمل می کنیم:

import { useState } from 'react';

مشاهده در ادیتور

سپس inside کامپوننت تابعی، useState را صدا می زنی. مقدار برگشتی معمولا شامل یک مقدار state و یک تابع setter است. در مثال بالا color مقدار state و setColor تابع تغییر آن است.

state معمولا به داده ها و ویژگی هایی گفته می شود که نیاز داریم تغییرشان را رصد کنیم؛ مثلا رنگ، شمارنده، وضعیت ورود کاربر و موارد شبیه این.

برای جزئیات بیشتر درباره useState می توانی بعدا به صفحه useState در ری اکت سر بزنی.

قوانین مهم برای هوکس در ری اکت

هوکس در ری اکت سه قانون اصلی دارند. اگر این قوانین را رعایت نکنی، ری اکت رفتار درستی نخواهد داشت.

• هوکس فقط داخل کامپوننت های تابعی ری اکت صدا زده می شوند.
• هوکس باید در بالاترین سطح بدنه کامپوننت باشند؛ نه داخل if یا حلقه.
• هوکس نباید شرطی باشند؛ یعنی نباید گاهی صدا زده شوند و گاهی نه.

نکته: هوکس در کامپوننت های کلاسی کار نمی کنند. اگر از کلاس استفاده می کنی، باید سراغ روش های قدیمی تر state و lifecycle بروی.

هوک های سفارشی (Custom Hooks)

اگر منطق state تکراری در چند کامپوننت داری، می توانی یک هوک سفارشی بسازی. هوک سفارشی یعنی تابعی که خودش از چند هوک دیگر استفاده می کند و یک رفتار آماده را برمی گرداند.

این کار کمک می کند کد تکراری کمتر شود و منطق مشترک تمیزتر باشد. مثلا می توانی یک Custom Hook برای مدیریت وضعیت آنلاین بودن کاربر بسازی.

در بخش هوک های سفارشی در ری اکت می توانی این موضوع را کامل ببینی و تمرین کنی.

اگر خواستی همیشه این مطلب را راحت پیدا کنی، صفحه هوکس در ری اکت را به بوکمارک مرورگر اضافه کن.

جمع بندی سریع

• هوکس در ری اکت تابع هایی هستند که به state و lifecycle دسترسی می دهند.
• useState ساده ترین هوک برای نگه داشتن state در کامپوننت های تابعی است.
• هوکس فقط در بالاترین سطح بدنه کامپوننت تابعی استفاده می شوند.
• هوکس در کلاس کامپوننت ها کار نمی کنند.
• با هوک های سفارشی می توانی منطق state تکراری را یک جا نگه داری.