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

قلاب های React چیست؟

توابعی که به شما امکان می دهد از ویژگی های React در اجزای کاربردی بدون کلاس استفاده کنید.

7 قلاب ضروری

1. usstate

چه کاری انجام می دهد: مقادیری را که می تواند در برنامه شما تغییر کند پیگیری می کند

// e.g. 1: Basic state management
const [count, setCount] = useState(0);

// e.g. 2: Form inputs
const [name, setName] = useState('');

چه زمانی استفاده کنید:

• ذخیره مقادیر ورودی فرم
• Toggling UI ایالات (باز/بسته)
• ردیابی مقادیر ساده (پیشخوان ، پرچم)

2. استفاده

چه کاری انجام می دهد: به ما کمک می کند تا هنگام تغییر کارها ، کد را اجرا کنیم (یا وقتی یک جزء برای اولین بار بارگیری می شود)

// e.g. 1: Run once on mount (empty dependencies)
useEffect(() => {
  // Setup code
  return () => { /* Cleanup code */ };
}, []);

// e.g. 2: Run when dependencies change
useEffect(() => {
  document.title = `${count} new messages`;
}, [count]);

چه زمانی استفاده کنید:

• داده های واکشی
• اشتراک/شنوندگان رویداد
• دستکاری دام
• همگام سازی با سیستم های خارجی

3. usecontext

چه کاری انجام می دهد: به چندین مؤلفه اجازه می دهد تا داده های یکسان را بدون عبور دستی به اشتراک بگذارند

// Access theme from anywhere in component tree
const theme = useContext(ThemeContext);

چه زمانی استفاده کنید:

• دسترسی به حالت جهانی (مضامین ، داده های کاربر)
• جلوگیری از حفاری از طریق بسیاری از مؤلفه ها
• هنگامی که چندین مؤلفه به داده های یکسان احتیاج دارند

4. Useref

چه کاری انجام می دهد: کمک می کند تا یک عنصر را بدون ایجاد مجدداً غیرضروری ارجاع دهد

// e.g. 1: DOM element reference
const inputRef = useRef(null);
inputRef.current.focus();

// e.g. 2: Value persistence between renders
const prevCountRef = useRef();

چه زمانی استفاده کنید:

• دسترسی به عناصر DOM
• ذخیره مقادیر قبلی
• نگه داشتن مقادیری که نباید باعث ایجاد مجدد شود
• مدیریت تایمرها/فواصل

5. کاربر کاربر

چه کاری انجام می دهد: منطق حالت پیچیده را مدیریت می کند

const [state, dispatch] = useReducer(reducer, initialState);
dispatch({ type: 'increment' });

چه زمانی استفاده کنید:

• حالت پیچیده با مقادیر فرعی متعدد
• وقتی وضعیت بعدی به وضعیت قبلی بستگی دارد
• وقتی انتقال دولت منطق تجارت دارد
• هنگامی که اقدامات باعث بروزرسانی های چند حالته می شود

6. او هنوز دعوت می کند

چه کاری انجام می دهد: محاسبات گران قیمت برای جلوگیری از بازپرداخت آنها به طور غیر ضروری

const expensiveValue = useMemo(() => {
  return computeExpensiveValue(data);
}, [data]);

چه زمانی استفاده کنید:

• بهینه سازی محاسبات سنگین
• جلوگیری از محاسبات غیر ضروری

7. useCallback

چه کاری انجام می دهد: توابع را به یاد می آورند تا آنها هر رندر بازآفرینی نشوند

const handleClick = useCallback(() => {
  console.log('Clicked!');
}, []);

چه زمانی استفاده کنید:

• جلوگیری از بازگرداندن مجدد غیر ضروری در مؤلفه های کودک
• جلوگیری از تفریح ​​عملکرد در هر رندر

قلاب های سفارشی

قلاب های خود را برای استفاده مجدد از منطق بین مؤلفه ها ایجاد کنید:

// Extract reusable logic
function useWindowSize() {
  const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });

  // Event handling + cleanup in one hook
  useEffect(() => {
    const handleResize = () => setSize({ width: window.innerWidth, height: window.innerHeight });
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
}

قوانین قلاب

1. فقط در سطح بالا تماس بگیرید (بدون شرایط/حلقه)
2. فقط از توابع React تماس بگیرید
3. قلاب های سفارشی را با پیشوند “استفاده” نامگذاری کنید

نکات سریع

• استفاده کردن useState برای حالت ساده ، useReducer برای حالت پیچیده
• توابع پاکسازی را در فراموش نکنید useEffect
• بهینه سازی رندرها با useMemo وت useCallback
• برای به اشتراک گذاشتن منطق ، قلاب های سفارشی ایجاد کنید ، نه فقط برای استفاده مجدد
• استفاده کردن useImperativeHandle برای افشای روشها از مؤلفه های کودک به والدین.
• استفاده کردن useLayoutEffect هنگامی که به روزرسانی ها باید قبل از نقاشی مرورگر اتفاق بیفتد.
• استفاده کردن useDebugValue برای اضافه کردن برچسب ها به قلاب های سفارشی برای اشکال زدایی آسان تر در React Devtools.

🚀 بسته شدن

وقتی می فهمید که چگونه کار می کنند ، قلاب های واکنش قدرتمند و سرگرم کننده هستند! در اینجا یک ضبط سریع وجود دارد:

✅ usstate → تغییر مقادیر را دنبال می کند (به عنوان یک تخته سفید کوچک فکر کنید که در آن می توانید یادداشت ها را “داده” که ممکن است با گذشت زمان تغییر کند ، یادداشت کنید)
✅ کار عوارض جانبی را اجرا می کند (مانند تنظیم زنگ یادآوری. وقتی اتفاقات خاصی رخ می دهد ، می خواهید به شما یادآوری شود)
✅ useContext → مقادیر را در بین مؤلفه ها به اشتراک می گذارد (یک تخته سیاه در خانه خود را تصور کنید که همه بتوانند پیام بخوانند و بنویسند)
✅ درز → عناصر را بدون ارائه مجدد ارجاع می دهد (مانند قرار دادن یک نشانک در یک کتاب است. این به شما کمک می کند تا یک نقطه یا عنصر خاص را پیگیری کنید)
✅ کارآموز → منطق حالت پیچیده را کنترل می کند (مانند جعبه پیشنهادی برای مدیریت تغییرات پیچیده حالت)
✅ شما در دعوت هستید محاسبات را بهینه می کند (مانند یک سرآشپز که از قبل مواد تشکیل دهنده را آماده می کند ، بنابراین آنها مجبور نیستند دوباره آنها را برای هر سفارش خرد کنند)
✅ useCallback tunctions توابع را بهینه می کند (مانند صرفه جویی در لیست خرید ، بنابراین هر بار که به خرید می روید ، آن را بازنویسی نکنید!)