در حال بارگذاری...

مرجع Hooks

مرجع Hooks در ری‌اکت (React) مجموعه‌ای از ابزارها است که امکان مدیریت state، lifecycle و منطق componentها را در functional components فراهم می‌کند. اهمیت این مرجع در این است که با استفاده از Hooks، توسعه‌دهندگان می‌توانند کامپوننت‌های قابل استفاده مجدد، modular و بهینه ایجاد کنند، بدون آنکه نیاز به class components پیچیده داشته باشند.
Hooks مانند useState، useEffect، useReducer، useMemo، useCallback و useContext امکان مدیریت state محلی، اثرات جانبی، بهینه‌سازی عملکرد و مدیریت داده‌ها را به صورت مؤثر فراهم می‌کنند. در توسعه SPAها (Single Page Applications) استفاده از Hooks باعث بهبود پاسخگویی و قابلیت نگهداری برنامه می‌شود.
در این مرجع، شما خواهید آموخت که چگونه مفاهیم کلیدی ری‌اکت مانند components، مدیریت state، جریان داده و lifecycle را با استفاده از Hooks پیاده‌سازی کنید. همچنین با رایج‌ترین اشتباهات مانند prop drilling، رندرهای غیرضروری و تغییر مستقیم state آشنا خواهید شد و تکنیک‌های پیشرفته برای ایجاد کامپوننت‌های reusable و بهینه را خواهید دید. این مرجع به توسعه‌دهندگان کمک می‌کند تا بتوانند پروژه‌های ری‌اکت مقیاس‌پذیر و حرفه‌ای طراحی کنند و بهترین شیوه‌های توسعه را رعایت نمایند.

مثال پایه

jsx
JSX Code 
import React, { useState, useEffect } from 'react';

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

useEffect(() => {
document.title = `Count: ${count}`;
console.log('Component updated:', count);
}, [count]);

const increment = () => setCount(prev => prev + 1);
const decrement = () => setCount(prev => prev - 1);

return (
<div style={{ textAlign: 'center', padding: '20px' }}> <h2>React Hook Counter</h2> <p>Current Count: {count}</p> <button onClick={decrement}>-</button> <button onClick={increment}>+</button> </div>
);
}

export default Counter;

در این مثال، useState برای مدیریت state محلی count استفاده شده است و setCount با هر تغییر state باعث رندر مجدد component می‌شود. useEffect برای مدیریت اثرات جانبی مانند به‌روزرسانی عنوان سند و logging به کار رفته است. آرایه وابستگی [count] تضمین می‌کند که useEffect تنها زمانی اجرا شود که مقدار count تغییر کند، که این از رندرهای غیرضروری جلوگیری می‌کند.
این مثال نشان می‌دهد که چگونه با استفاده از Hooks می‌توان منطق state و lifecycle را به شکل functional و قابل فهم مدیریت کرد. همچنین بهترین شیوه‌ها رعایت شده است: state به صورت immutable مدیریت می‌شود، prop drilling حذف شده و منطق کامپوننت خوانا و قابل نگهداری است. این نمونه به خوبی مفهوم reusable و maintainable بودن کامپوننت‌ها با استفاده از Hooks را نشان می‌دهد.

مثال کاربردی

jsx
JSX Code 
import React, { useState, useEffect, useMemo } from 'react';

function FilteredList({ items }) {
const [search, setSearch] = useState('');

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

useEffect(() => {
console.log('Filtered items count:', filteredItems.length);
}, [filteredItems]);

return ( <div> <h3>Filtered List using Hooks</h3>
<input
type="text"
placeholder="Filter..."
value={search}
onChange={e => setSearch(e.target.value)}
/> <ul>
{filteredItems.map((item, index) => ( <li key={index}>{item}</li>
))} </ul> </div>
);
}

export default FilteredList;

Advanced ری‌اکت (React) Implementation

jsx
JSX Code 
import React, { useReducer, useEffect, useCallback } from 'react';

function dataReducer(state, action) {
switch (action.type) {
case 'INIT':
return { ...state, loading: true, error: false };
case 'SUCCESS':
return { ...state, loading: false, data: action.payload };
case 'ERROR':
return { ...state, loading: false, error: true };
default:
return state;
}
}

function useFetchData(url) {
const [state, dispatch] = useReducer(dataReducer, {
data: [],
loading: false,
error: false,
});

const fetchData = useCallback(async () => {
dispatch({ type: 'INIT' });
try {
const response = await fetch(url);
const result = await response.json();
dispatch({ type: 'SUCCESS', payload: result });
} catch {
dispatch({ type: 'ERROR' });
}
}, [url]);

useEffect(() => {
fetchData();
}, [fetchData]);

return state;
}

function DataDisplay() {
const { data, loading, error } = useFetchData('[https://jsonplaceholder.typicode.com/posts](https://jsonplaceholder.typicode.com/posts)');

if (loading) return <p>Loading data...</p>;
if (error) return <p>Error fetching data.</p>;

return ( <div> <h3>Data Loaded via Hook</h3> <ul>
{data.slice(0, 10).map(item => ( <li key={item.id}>{item.title}</li>
))} </ul> </div>
);
}

export default DataDisplay;

بهترین شیوه‌ها در ری‌اکت شامل استفاده از Custom Hooks برای encapsulate کردن منطق reusable، مدیریت state به صورت immutable، و جلوگیری از رندرهای غیرضروری است. برای جلوگیری از prop drilling می‌توان از Context API و Custom Hooks استفاده کرد.
اشتباهات رایج شامل تغییر مستقیم state، استفاده نادرست از dependencies در useEffect و useMemo، و بهینه‌سازی ضعیف عملکرد است. برای debugging می‌توان از React DevTools و console logs بهره برد. بهینه‌سازی عملکرد شامل استفاده از useMemo و useCallback برای جلوگیری از محاسبات یا رندرهای غیرضروری است. useReducer برای مدیریت state پیچیده و useLayoutEffect برای همگام‌سازی layout مناسب هستند. امنیت شامل اعتبارسنجی داده‌ها و پاک‌سازی effects است.

📊 مرجع کامل

ری‌اکت (React) Element/Method Description Syntax Example Notes
useState مدیریت state محلی const [value, setValue] = useState(initial) useState(0) Update triggers re-render
useEffect مدیریت اثرات جانبی useEffect(callback, deps) useEffect(()=>{}, [deps]) اجرا پس از render
useContext دسترسی به context useContext(Context) const user = useContext(UserContext) Avoids prop drilling
useReducer مدیریت state پیچیده const [state, dispatch] = useReducer(reducer, init) useReducer(reducerFn, {}) State machine handling
useMemo Memoization مقادیر useMemo(fn, deps) useMemo(()=>calc(a,b), [a,b]) Prevents unnecessary computations
useCallback Memoization توابع useCallback(fn, deps) useCallback(()=>handle(), [deps]) Prevents child re-renders
useRef دسترسی به DOM یا مقادیر persistent const ref = useRef(initial) ref.current.focus() Does not trigger re-render
useLayoutEffect اجرای قبل از paint useLayoutEffect(callback, deps) useLayoutEffect(()=>{}, [deps]) DOM sync
useImperativeHandle شخصی‌سازی ref useImperativeHandle(ref, createHandle) useImperativeHandle(ref, ()=>({...})) With forwardRef
useDebugValue نمایش debug info useDebugValue(value) useDebugValue('Active') Visible in DevTools

📊 Complete ری‌اکت (React) Properties Reference

Property Values Default Description ری‌اکت (React) Support
StrictMode boolean false نمایش هشدارهای احتمالی 16.8+
Suspense Component null بارگذاری تنبل 16.6+
lazy Function null Dynamic import 16.6+
memo Function null Memoize component 16.8+
Profiler Function null Performance measurement 16.9+
Fragment JSX grouping none گروه‌بندی عناصر 16.2+
forwardRef Function null Forward ref 16.3+
Children Utility null Manipulate children 16.0+
cloneElement Function null Clone element with new props 16.0+
createContext Function null Create context 16.3+
createRef Function null Create ref objects 16.3+

خلاصه و گام‌های بعدی
مرجع Hooks ری‌اکت ابزارهای قدرتمندی برای مدیریت state، اثرات جانبی و lifecycle در functional components ارائه می‌دهد و باعث ایجاد معماری‌های scalable و maintainable می‌شود.
گام‌های بعد شامل ایجاد Custom Hooks، استفاده از Context API، اندازه‌گیری عملکرد با Profiler، و ترکیب Suspense و server components است. یادگیری این الگوها به کاهش redundancy، بهینه‌سازی عملکرد و توسعه حرفه‌ای ری‌اکت کمک می‌کند.

کلیدواژه‌های مرتبط

کاربران همچنین با این عبارات این محتوا را جستجو می‌کنند:

ری‌اکت hooks مرجع hooks ری‌اکت آموزش useState ری‌اکت مثال useEffect ری‌اکت hooks پیشرفته ری‌اکت custom hooks ری‌اکت useReducer ری‌اکت فارسی بهینه‌سازی performance ری‌اکت state management با hooks functional components ری‌اکت lifecycle hooks ری‌اکت توسعه مدرن ری‌اکت SPA hooks ری‌اکت useMemo useCallback ری‌اکت reusable components ری‌اکت

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓
4
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 1 از 1
React آموزش