درک React Hooks: راهنمای مبتدیان

“درک React Hooks: راهنمای مبتدی”

React Hooks یکی از قدرتمندترین ویژگی های معرفی شده در React است. آنها مدیریت حالت و اثرات جانبی را در اجزای عملکردی ساده‌تر می‌کنند و کد شما را پاک‌تر و خواناتر می‌کنند. در این پست به سه قلاب پرکاربرد می پردازیم: useState، useEffect، و useContext.

1. useState – مدیریت وضعیت در اجزای عملکردی

این useState hook به شما امکان می دهد بدون تبدیل آنها به اجزای کلاس، حالت را به اجزای عملکردی اضافه کنید.

مثال:

const Counter = () => {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <p>Current Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

چگونه کار می کند:

• useState آرایه ای را با دو مقدار برمی گرداند: وضعیت فعلی و تابعی برای به روز رسانی آن.
• می توانید از آن برای مدیریت هر نوع داده استفاده کنید – اعداد، رشته ها، اشیاء یا آرایه ها.

2. useEffect – مدیریت عوارض جانبی

این useEffect هوک برای مدیریت عوارض جانبی مانند تماس‌های API، اشتراک‌ها یا دستکاری‌های DOM عالی است.

مثال:

const DataFetcher = () => {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // Empty array ensures this runs only once on mount

  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};

نکات کلیدی:

• آرگومان دوم (آرایه وابستگی) تعیین می کند که اثر چه زمانی اجرا شود.
• از یک آرایه خالی استفاده کنید ([]) برای اجرای افکت فقط یک بار پس از نصب کامپوننت.

3. useContext – مدیریت دولت جهانی

این useContext هوک دسترسی به داده‌های جهانی را بدون عبور دادن پایه‌های درخت مؤلفه ساده می‌کند.

مثال:

const ThemeContext = React.createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = React.useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

const ThemeToggler = () => {
  const { theme, setTheme } = React.useContext(ThemeContext);

  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Toggle Theme: {theme}
    </button>
  );
};

// Usage in App
const App = () => (
  <ThemeProvider>
    <ThemeToggler />
  </ThemeProvider>
);

چرا استفاده کنید useContext?

• از “حفاری پایه” جلوگیری می کند، جایی که شما پایه ها را از سطوح مختلف اجزا عبور می دهید.
• برای مدیریت تم های جهانی، داده های کاربر یا تنظیمات برنامه ایده آل است.

نتیجه گیری

React Hooks اجزای کاربردی را قدرتمندتر و انعطاف پذیرتر می کند. با useState، useEffect، و useContext، می توانید به راحتی وضعیت، عوارض جانبی و داده های سراسری را بدون تکیه بر اجزای کلاس مدیریت کنید.

قلاب‌ها برای هر توسعه‌دهنده‌ی React ضروری است – شروع به آزمایش کنید و کشف کنید که چگونه فرآیند توسعه شما را ساده می‌کنند!

React Hook مورد علاقه شما چیست؟ در نظرات به من اطلاع دهید!