Mastering React: قلاب های ضروری که باید بدانید 💡

Summarize this content to 400 words in Persian Lang
قلاب‌های React نحوه ساخت و مدیریت کامپوننت‌ها توسط توسعه‌دهندگان را تغییر داده‌اند. با ارائه روشی تمیز و کاربردی برای مدیریت حالت، عوارض جانبی و سایر ویژگی‌ها، قلاب‌ها به بخشی ضروری از توسعه React مدرن تبدیل شده‌اند. در این وبلاگ، ما متداول‌ترین قلاب‌هایی را که هر توسعه‌دهنده React باید بر آن تسلط داشته باشد، همراه با مثال‌های عملی برای نشان دادن برنامه‌های کاربردی در دنیای واقعی آن‌ها بررسی می‌کنیم.

فهرست 📖

use State 📊
useEffect ⌚
useContext 🔐
useRef 🔄
استفاده از کاهش دهنده 🔄
در یادداشت 🎨
useCallback 🔁

1. useState 📊

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

مثال: کامپوننت شمارنده با حافظه محلی

import React, { useState, useEffect } from ‘react’;

function Counter() {
const [count, setCount] = useState(() => {
const saved = localStorage.getItem(‘count’);
return saved ? parseInt(saved, 10) : 0;
});

useEffect(() => {
localStorage.setItem(‘count’, count);
}, [count]);

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چرا از آن استفاده کنید؟
به طور یکپارچه با فضای ذخیره‌سازی دائمی ادغام می‌شود و آن را برای صرفه‌جویی در پیشرفت کاربر ایده‌آل می‌کند.

2. useEffect ⌚

را useEffect هوک یک راه قدرتمند برای کنترل عوارض جانبی مانند واکشی داده ها، اشتراک در رویدادها یا به روز رسانی DOM است. جایگزین روش های چرخه حیات مانند componentDidMount، componentDidUpdate، و componentWillUnmount.

مثال: داده‌های API نظرسنجی

import React, { useEffect, useState } from ‘react’;

function LiveScores() {
const [scores, setScores] = useState([]);

useEffect(() => {
const interval = setInterval(() => {
fetch(‘https://api.example.com/scores’)
.then(response => response.json())
.then(data => setScores(data));
}, 5000);

return () => clearInterval(interval); // Cleanup on unmount
}, []);

return (
<ul>
{scores.map(score => (
<li key={score.id}>{score.team}: {score.points}</li>
))}
</ul>
);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چرا از آن استفاده کنید؟
به‌روزرسانی‌های دوره‌ای را برای برنامه‌های بلادرنگ مدیریت می‌کند.

3. useContext 🔐

را useContext hook راهی برای دسترسی مستقیم به مقادیر متن در اجزای تابعی بدون نیاز به آن فراهم می کند Context.Consumer لفاف ها

مثال: احراز هویت کاربر

import React, { useContext } from ‘react’;
import { AuthContext } from ‘./AuthProvider’;

function UserProfile() {
const { user } = useContext(AuthContext);

return (
<div>
<h1>Welcome, {user.name}!</h1>
<p>Email: {user.email}</p>
</div>
);
}

function App() {
const user = { name: ‘Taylor’, email: ‘taylor@example.com’ };

return (
<AuthContext.Provider value={{ user }}>
<UserProfile />
</AuthContext.Provider>
);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چرا از آن استفاده کنید؟
عالی برای مدیریت جلسات کاربر و سایر وضعیت های جهانی.

4. useRef 🔄

را useRef hook راهی برای حفظ مقادیر در سراسر رندرها بدون ایجاد رندر مجدد فراهم می کند. اغلب برای دسترسی به عناصر DOM یا ذخیره مقادیر قابل تغییر استفاده می شود.

مثال: ورودی بازگرداندن

import React, { useRef, useState } from ‘react’;

function SearchBar({ onSearch }) {
const [query, setQuery] = useState(”);
const timeoutRef = useRef(null);

const handleChange = (e) => {
const value = e.target.value;
setQuery(value);

if (timeoutRef.current) clearTimeout(timeoutRef.current);

timeoutRef.current = setTimeout(() => {
onSearch(value);
}, 500); // Debounce time
};

return <input type=”text” value={query} onChange={handleChange} />;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چرا از آن استفاده کنید؟
عملکرد را در جستجو یا سناریوهای فیلتر زمان واقعی بهینه می کند.

5. useReducer 🔄

را useReducer قلاب جایگزینی برای useState زمانی که مدیریت دولتی پیچیده تر می شود. این به ویژه برای مدیریت حالت با اقدامات متعدد مفید است.

مثال: سبد خرید

import React, { useReducer } from ‘react’;

function cartReducer(state, action) {
switch (action.type) {
case ‘add’:
return […state, action.item];
case ‘remove’:
return state.filter(item => item.id !== action.id);
default:
throw new Error(‘Unknown action’);
}
}

function Cart() {
const [cart, dispatch] = useReducer(cartReducer, []);

const addItem = (item) => dispatch({ type: ‘add’, item });
const removeItem = (id) => dispatch({ type: ‘remove’, id });

return (
<div>
<h1>Shopping Cart</h1>
<ul>
{cart.map(item => (
<li key={item.id}>
{item.name} <button onClick={() => removeItem(item.id)}>Remove</button>
</li>
))}
</ul>
<button onClick={() => addItem({ id: 1, name: ‘Apple’ })}>Add Apple</button>
</div>
);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چرا از آن استفاده کنید؟
انتقال وضعیت پیچیده را در تجارت الکترونیک یا برنامه‌های دارای فرم سنگین به خوبی انجام می‌دهد.

6. در یادداشت 🎨

را useMemo هوک با به خاطر سپردن محاسبات گران قیمت به بهینه سازی عملکرد کمک می کند. فقط زمانی مقدار را دوباره محاسبه می کند که وابستگی ها تغییر کنند.

مثال: فیلتر کردن داده های بزرگ

import React, { useMemo, useState } from ‘react’;

function LargeList({ items }) {
const [query, setQuery] = useState(”);

const filteredItems = useMemo(() => {
return items.filter(item => item.includes(query));
}, [items, query]);

return (
<div>
<input
type=”text”
placeholder=”Search…”
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
<ul>
{filteredItems.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چرا از آن استفاده کنید؟
عملکرد لیست ها یا جداول با هزاران ردیف را افزایش می دهد.

7. استفاده از Callback 🔁

را useCallback هوک توابع پاسخ به تماس را به خاطر می‌سپارد تا از ایجاد مجدد غیرضروری در هر رندر جلوگیری کند. مخصوصاً هنگام ارسال تماس‌های برگشتی به مؤلفه‌های فرزند مفید است.

مثال: رندر کودک بهینه شده

import React, { useState, useCallback } from ‘react’;

function Child({ onClick }) {
console.log(‘Child rendered’);
return <button onClick={onClick}>Click Me</button>;
}

function Parent() {
const [count, setCount] = useState(0);

const increment = useCallback(() => setCount((prev) => prev + 1), []);

return (
<div>
<p>Count: {count}</p>
<Child onClick={increment} />
</div>
);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چرا از آن استفاده کنید؟
با به حداقل رساندن رندرهای مجدد کودکان از تنگناهای عملکردی جلوگیری می کند.

نتیجه گیری 🎯

قلاب‌های React ابزارهای قدرتمندی را برای مدیریت وضعیت، عوارض جانبی، بهینه‌سازی عملکرد و موارد دیگر ارائه می‌کنند. تسلط بر این قلاب ها -useState، useEffect، useContext، useRef، useReducer، useMemo، و useCallback- به شما امکان می دهد برنامه های React تمیزتر و کارآمدتر بنویسید.

شروع به ترکیب این قلاب ها در پروژه های خود کنید و تماشا کنید که مهارت های React خود را به سطح بعدی ارتقا دهید!

import React, { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(() => {
    const saved = localStorage.getItem('count');
    return saved ? parseInt(saved, 10) : 0;
  });

  useEffect(() => {
    localStorage.setItem('count', count);
  }, [count]);

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

import React, { useEffect, useState } from 'react';

function LiveScores() {
  const [scores, setScores] = useState([]);

  useEffect(() => {
    const interval = setInterval(() => {
      fetch('https://api.example.com/scores')
        .then(response => response.json())
        .then(data => setScores(data));
    }, 5000);

    return () => clearInterval(interval); // Cleanup on unmount
  }, []);

  return (
    <ul>
      {scores.map(score => (
        <li key={score.id}>{score.team}: {score.points}</li>
      ))}
    </ul>
  );
}

import React, { useContext } from 'react';
import { AuthContext } from './AuthProvider';

function UserProfile() {
  const { user } = useContext(AuthContext);

  return (
    <div>
      <h1>Welcome, {user.name}!</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

function App() {
  const user = { name: 'Taylor', email: 'taylor@example.com' };

  return (
    <AuthContext.Provider value={{ user }}>
      <UserProfile />
    </AuthContext.Provider>
  );
}

import React, { useRef, useState } from 'react';

function SearchBar({ onSearch }) {
  const [query, setQuery] = useState('');
  const timeoutRef = useRef(null);

  const handleChange = (e) => {
    const value = e.target.value;
    setQuery(value);

    if (timeoutRef.current) clearTimeout(timeoutRef.current);

    timeoutRef.current = setTimeout(() => {
      onSearch(value);
    }, 500); // Debounce time
  };

  return <input type="text" value={query} onChange={handleChange} />;
}

import React, { useReducer } from 'react';

function cartReducer(state, action) {
  switch (action.type) {
    case 'add':
      return [...state, action.item];
    case 'remove':
      return state.filter(item => item.id !== action.id);
    default:
      throw new Error('Unknown action');
  }
}

function Cart() {
  const [cart, dispatch] = useReducer(cartReducer, []);

  const addItem = (item) => dispatch({ type: 'add', item });
  const removeItem = (id) => dispatch({ type: 'remove', id });

  return (
    <div>
      <h1>Shopping Cart</h1>
      <ul>
        {cart.map(item => (
          <li key={item.id}>
            {item.name} <button onClick={() => removeItem(item.id)}>Remove</button>
          </li>
        ))}
      </ul>
      <button onClick={() => addItem({ id: 1, name: 'Apple' })}>Add Apple</button>
    </div>
  );
}

import React, { useMemo, useState } from 'react';

function LargeList({ items }) {
  const [query, setQuery] = useState('');

  const filteredItems = useMemo(() => {
    return items.filter(item => item.includes(query));
  }, [items, query]);

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <ul>
        {filteredItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

import React, { useState, useCallback } from 'react';

function Child({ onClick }) {
  console.log('Child rendered');
  return <button onClick={onClick}>Click Me</button>;
}

function Parent() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => setCount((prev) => prev + 1), []);

  return (
    <div>
      <p>Count: {count}</p>
      <Child onClick={increment} />
    </div>
  );
}