react-applications-ریکت-کاربردهادوره رایگان-الگوریتم اول-free-آموزش کامل

لطفا صبر کنید...

معرفی Hooks در React

هوک‌ها (Hooks) در React امکان مدیریت State و Lifecycle را بدون نیاز به کامپوننت‌های کلاسی فراهم می‌کنند. از نسخه 16.8 به بعد، React اجازه می‌دهد تا در کامپوننت‌های فانکشنی هم از State و سایر قابلیت‌ها استفاده کنیم.

 

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

🔹 قبل از Hooks، فقط کامپوننت‌های کلاسی می‌توانستند State و متدهای Lifecycle داشته باشند.
🔹 با Hooks، نیازی به کلاس‌ها و پیچیدگی‌های مربوط به this نداریم.
🔹 کد خواناتر و ساده‌تر شده و قابلیت استفاده مجدد از منطق‌ها بیشتر می‌شود.

 

معروف‌ترین Hooks در React

Hook کاربرد
useState مدیریت State در کامپوننت‌های فانکشنی
useEffect اجرای کد هنگام لود شدن، آپدیت شدن یا حذف شدن کامپوننت
useContext استفاده از Context API بدون نیاز به Consumer و Provider
useReducer جایگزینی پیشرفته برای useState (مدیریت State پیچیده)
useRef دسترسی مستقیم به عناصر DOM یا نگه داشتن مقدار بدون رندر مجدد
useMemo بهینه‌سازی عملکرد با مقداردهی مجدد فقط در صورت تغییر داده‌ها
useCallback جلوگیری از ساخت توابع جدید در هر رندر
useLayoutEffect مشابه useEffect ولی قبل از رندر شدن UI اجرا می‌شود
useImperativeHandle کنترل refها در کامپوننت‌های سفارشی

 

۱. مدیریت State با useState

useState برای ذخیره و بروزرسانی داده‌های متغیر در یک کامپوننت فانکشنی استفاده می‌شود.

مثال: شمارنده ساده

import React, { useState } from "react";
const Counter = () => {
  const [count, setCount] = useState(0); // مقدار اولیه ۰
  return (
    <div>
      <h1>عدد: {count}</h1>
      <button onClick={() => setCount(count + 1)}>افزایش</button>
    </div>
  );
};
export default Counter;

✔ مقدار اولیه count برابر ۰ است.
✔ setCount مقدار count را تغییر داده و باعث رندر مجدد می‌شود.

 

۲. استفاده از useEffect برای مدیریت Lifecycle

useEffect مشابه متدهای componentDidMount، componentDidUpdate و componentWillUnmount در کامپوننت‌های کلاسی است.

مثال: اجرای کد هنگام لود شدن کامپوننت

import React, { useState, useEffect } from "react";
const Timer = () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log("کامپوننت رندر شد!");
  });
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>افزایش</button>
    </div>
  );
};
export default Timer;

این useEffect در هر رندر اجرا می‌شود.

اجرای useEffect فقط هنگام mount (بارگذاری اولیه)

useEffect(() => {
  console.log("فقط یک‌بار اجرا شد!");
}, []); // آرایه خالی یعنی فقط هنگام mount اجرا شود.

 

اجرای useEffect هنگام تغییر مقدار خاص

useEffect(() => {
  console.log("وقتی count تغییر کند، اجرا می‌شود!");
}, [count]); // فقط وقتی count تغییر کند اجرا خواهد شد.

 

۳. مدیریت داده‌های پیچیده با useReducer

useReducer برای مدیریت State پیچیده‌تر استفاده می‌شود و مشابه Redux عمل می‌کند.

مثال: شمارنده با useReducer

import React, { useReducer } from "react";
const reducer = (state, action) => {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      return state;
  }
};
const Counter = () => {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <div>
      <h1>{state.count}</h1>
      <button onClick={() => dispatch({ type: "increment" })}>افزایش</button>
      <button onClick={() => dispatch({ type: "decrement" })}>کاهش</button>
    </div>
  );
};
export default Counter;

 

✔ dispatch({ type: "increment" }) باعث افزایش مقدار count می‌شود.
✔ این روش برای مدیریت State پیچیده و چندمرحله‌ای عالی است.

 

۴. استفاده از useRef برای دسترسی به عناصر DOM

useRef برای دسترسی مستقیم به DOM یا نگه داشتن مقداری بدون ایجاد رندر مجدد استفاده می‌شود.

مثال: فوکوس خودکار روی Input

import React, { useRef, useEffect } from "react";
const InputFocus = () => {
  const inputRef = useRef(null);
  useEffect(() => {
    inputRef.current.focus(); // فوکوس روی اینپوت هنگام لود شدن
  }, []);
  return <input ref={inputRef} type="text" placeholder="اینجا تایپ کنید..." />;
};
export default InputFocus;

✔ مقدار inputRef.current به المان input متصل شده و فوکوس می‌گیرد.

 

۵. استفاده از useContext برای مدیریت State سراسری

useContext برای مدیریت مقادیر سراسری در برنامه استفاده می‌شود.

مثال: مدیریت تم رنگی با useContext

import React, { createContext, useContext, useState } from "react";
const ThemeContext = createContext();
const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState("light");
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};
const Button = () => {
  const { theme, setTheme } = useContext(ThemeContext);
  return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      تغییر تم به {theme === "light" ? "تیره" : "روشن"}
    </button>
  );
};
const App = () => (
  <ThemeProvider>
    <Button />
  </ThemeProvider>
);
export default App;

 

✔ useContext(ThemeContext) مقدار تم رنگی را خوانده و تغییر می‌دهد.

 

جمع‌بندی و نکات مهم

✅ Hooks فقط در فانکشنال کامپوننت‌ها استفاده می‌شوند.
✅ useState برای مدیریت State ساده به کار می‌رود.
✅ useEffect جایگزین componentDidMount و componentDidUpdate است.
✅ useReducer برای مدیریت State پیچیده‌تر استفاده می‌شود.
✅ useRef به عناصر DOM متصل می‌شود.
✅ useContext برای مدیریت داده‌های سراسری بدون نیاز به props drilling کاربرد دارد.